Crear y modificar extension de Chrome

Como parte de la construcción de una guía de trabajo para mejorar la productividad, comunicación y efectividad de equipos de mandos medios y altos, me surgió la necesidad de utilizar una herramienta de colaboración como Asana.

Un detalle que puede ser una barrera de entrada para la implementación es que se encuentra en inglés y no cuenta con traducción al español.

Este tipo de herramientas suelen cargar con la responsabilidad de lograr que las personas hagan mejor las cosas que no están haciendo bien, lo cual es parte del problema de baja efectividad y comunicación.

La herramienta es solo un espejo en el que nos miramos y refleja nuestra actitud hacia los problemas que enfrentamos.

El software es un multiplicador de nuestra capacidad. Si nuestro nivel de colaboración es cero no hay multipicador que nos haga dar resultados.

A su vez, elegir Asana es irrelevante, se podría usar Redbooth, Trello entre otras las cuales son alternativas totalmente válidas. En organizaciones donde la comunicación está fragmentada cualquiera de estas herramientas cuenta con potencial de sobra para lograr un impacto enorme.


Volviendo a la razón inicial de este post, queremos traducir Asana para evitar una barrera de entrada con usuarios que puedan tener dificultades con el idioma. De esta forma ya que vamos a trabajar con usuarios que deben cambiar su forma de trabajo y comunicación en forma radical, evitamos una barrera adicional con el idioma.

Para esto vamos a ampliar una extensión ya existente para Asana:
https://github.com/ajimix/asana-translate-chrome/

Creada por ajimix: https://twitter.com/ajimix

Algunos terminos se encuentran traducidos pero otros no ya que no ha sido actualizada en un tiempo. Encontraremos textos en español pero la mayoría en inglés.

asana-traduccion-spa

Lo que sucede es que ha medida que se ha actualizado Asana no se han actualizados los reemplazos en el HTML por parte de la extensión para Chrome.

Lo que debemos hacer es descargar el código de la extensión y modificarlo, vamos a github y la descargamos:

asana-traduccion-spa-github

El siguiente paso es descomprimir el zip y veremos la estructura con los siguientes directorios y archivos:

  • locales: donde se encuentran los idiomas
  • assets: imagenes y JS que debemos modificar, dentro de assets/js el archivo translate.js
  • manifest.json: declaración de la extensión

Para trabajar con la extensión a medida que agregamos las traducciones faltantes lo que debemos hacer es agregar la extensión en forma descomprimida desde el zip descargado.

  1. Vamos a Chrome e ingresamos en la barra de direcciones: chrome://extensions/
  2. Activamos el modo desarrollador y hacemos clic en Cargar extensión descomprimida.
  3. Seleccionamos la carpeta que descomprimimos del zip.
  4. Vamos a la web de Asana y recargamos.

asana-traduccion-spa-modo-desarrollador

En este punto tenemos la extensión tal cual estaba en github, es decir desactualizada.

El siguiente paso será ir buscando cada texto a traducir con el inspector de código e ir agregando las traducciones que sean necesarias.

Por ejemplo para traducir el texto ¨My Tasks¨ en la barra superior usamos el inspector y encontramos la clase que identifica este elemento.

asana-traduccion-spa-modo-traducir

En este caso es la clase ¨topbar-myTasksButton¨.

Ahora debemos ir al archivo JS donde se definen los elementos a traducir y buscar si ya existe. Vamos a ver que el mismo no existe aun.

asana-traduccion-spa-modo-string

En este caso debemos agregarlo usando la clase que vimos identifica al elemento, en otros casos puede ser necesario usar un id (#) en lugar de una clase (.).

asana-traduccion-spa-modo-string-traducido

Por último vamos al archivo locale para español (es), en este caso vamos a usar el texto ya traducido para MyTasks, si el mismo no hubiera existido lo agregamos.

asana-traduccion-spa-modo-string-traducido2

Una vez modificados los archivos y grabados, vamos a Chrome, borramos la extensión y la agregamos de nuevo desde la carpeta descomprimida.

Actualizamos la web de Asana y deberiamos ver la traduccion aplicada.

asana-traduccion-spa-modo-string-final

 

 

Google comienza a ser predictivo

Google tiene un problema y está trabajando para solucionarlo. Es excelente encontrando lo que buscamos pero no en saber lo que estamos necesitando encontrar antes de buscarlo.

Hasta que Google propuso la solución del PageRank para las búsquedas los motores como Yahoo fracasaban en lograr priorizar los resultados relevantes. Clasificar millones de sitios por categorias en un directorio curado a mano es una idea que no escala.

Pero la solución de Google parece haber movido el problema de lugar mas que solucionarlo en forma definitiva.

Mientras las computadoras estaban en un lugar físico y no en nuestros bolsillos, no buscabamos en el momento exacto en que tenemos una necesidad. Buscar en Internet requería de un momento específico, Internet era accesible desde un escritorio en nuestra casa o trabajo, para cuando llegabamos al mismo teniamos una idea formada de lo que necesitabamos buscar.

Hoy en día con los celulares nos encontramos en que podemos tener una inquietud y buscar en ese instante. Esto elimina el proceso mental que haciamos antes de llegar a la computadora, por lo que la misma debe darnos resultados con mucha menos información relevante.

Volvemos a la misma situación de Yahoo y su directorio. La solución propuesta por Google funcionaba en el contexto anterior, a partir de ahora no sabemos bien lo que necesitamos por lo que nuestra búsqueda debe ser realizada antes de saber que la necesitamos.

Aquí es donde entra en juego Google Now, ya estamos viendo algunos de sus efectos en distintas areas.

Por ejemplo en las fotos, Google sincroniza las mismas con nuestro Drive y procesa las imagenes para anticipar retoques, mejoras a tal punto que puede darnos la sugerencia de una foto única a partir de varias fotos:

panorama-600x117

Pueden ver un ejemplo de una panorámica construida por Google como sugerencia a varias fotos individuales. Antes de tener claro que queremos construir una panorámica en forma manual Google nos sugiere hacerlo.

Otro ejemplo, la geolocalización instantanea. Cuando queremos comunicar nuestra posición en un chat lo hacemos en forma descriptiva cuando nuestro celular tiene las coordenadas.

Para esto, Hangouts a comenzado a sugerir compartir nuestra ubicación cuando alguien nos pregunta donde estamos:

hangouts-geolocalizacion-google

Este es otro ejemplo de Google intentando ser predictivo, antes de que pensemos en buscar información nos sugiere la solución.

Tengamos en cuenta que este movimiento de Google hacia la anticipación es un acto de supervivencia y no un producto experimental, de no hacerlo alguien va a ocupar ese lugar y sus busquedas van a sufrir el mismo destino que los clasificados de los diarios.

Esperemos ver muchas otras sugerencias predictivas, como al ir o volver del trabajo, sugerencias de rutas u oportunidades de camino que puedan ser aprovechadas. Dada la predicción de clima y nuestro calendario opciones alternativas o previsiones a tomar.

Es solo el principio de un nuevo salto en la relevancia de la información. También se plantean una nueva cantidad de desafíos de privacidad ya que nuestros datos privados pasan a ser procesados sin opción por un tercero con intereses comerciales.

De regreso del trabajo para ver el partido de fútbol de las próximas horas es el momento exacto para recordarnos pasar a comprar X producto.

Diseñadores y Programadores, uníos!

La web ha cambiado radicalmente en los últimos años y no da signos de deternese. HTML5, CSS3, Diseños responsivos, front-end frameworks, SASS, términos que hasta hace unos pocos años no existían o eran solo usados por especialistas de la web son hoy en día las herramientas básicas de la web.

Se acabó el diseñador encerrado en su torre de marfil (Illustrator, Photoshop), se acabó el programador de backend atrincherado que no conoce a sus usuarios finales y que dice que a él le funciona.

La frontera se ha borrado y es necesario que ambas partes avances y colaboren en la tierra común del maquetado, la usabilidad y la iteración sobre el producto con el feedback de los usuarios.

Los programadores deben salir de sus trincheras y conocer a sus usuarios finales, verlos usar sus productos en ambientes no controlados.

Los diseñadores deben bajar de su torre y aprender a maquetar sus diseños, sufrir las consecuencias de sus decisiones.

Esta evolución deja de ser un plus de unos pocos para ser un requerimiento básico de la industria. Puede doler y ser duro al principio pero nos da un retorno real de nuestro trabajo al ser dueños del producto que construimos.