Muchos conocemos Google Analytics y su forma usable e intuitiva de graficar los datos al momento de ver reportes, pero estos son reportes que se quedan en esta herramienta. Muchas veces, al momento de generar reportes internos, queremos tener el mismo estilo de datos y para esto tenemos diversas librerías de Javascript que nos pueden dar una mano.

Google Chart Tools

Iniciando por el corazón de Analytics, tenemos Google Chart Tools, librería abierta que provee el API de Google Visualization para graficar datos de la forma más sencilla, donde tenemos diversos tipos de gráficas y podemos personalizarlas a nuestro gusto en su gran mayoría.



Básicamente debes pasarle a una función un Array con los datos de la gráfica y un objeto con los datos de personalización y en base a esto Google Charts te devuelve un SVG o un HTML (según deseemos) con la grafica lista.

Envision.js

Esta librería te permite crear cincos tipos de gráfica: real-time, TimeSeries, finance, Ajax y Custom, con una apariencia muy parecida a Analytics pero con una propuesta de usabilidad donde te presenta la gráfica total en miniatura y puedes seleccionar el tramo que deseas ver en una gráfica más grande.



De igual forma a Google Charts, se basa en una función a la cual le pasas la información a graficar y las opciones de personalización, además del área seleccionada por default al cargar la gráfica.

Datavisualization

Esta es una galería de librerías para graficar datos, donde puedes buscar diferentes formas de graficar, unas más útiles para presentaciones y otras para el día a día.



Puedes ver su repositorio en GitHub y su sitio web oficial para aplicarlas a tu proyecto!

Data-Driven Documents

Entre tantas opciones encontré una llamada Data-Driven Documents, que te presenta una cantidad grande de diversas gráficas y animaciones con un toque de diseño que te dará más posibilidades cuando quieras presentar datos.



Solo debes incluir esta librería y seguir los pasos de la gráfica que desees implementar, también puedes hacer fork a su repositorio en GitHub.

Mapas interactivos con Kartograph

Este framework te permite crear mapas en SVG de diversas formas, desde mapas en 3D hasta mapas simples para mostrar datos geográficos.



Kartograph es una librería que se va más a lo estético de la gráfica, pero muy difícilmente te ayudará en reportes muy grandes.

Escoge la librería que más te guste y compártela en los comentarios, cuéntanos cuál te parece más útil o cuál estás usando para generar tus propios reportes.

Diego Gonzalez, o DDG Collecciones como se lo conoce en la web, es un escultor de Rosario, Argentina, que trabaja profesionalmente para empresas tanto nacionales como internacionales, generando modelados de piezas originales para su posterior producción y venta masiva. Su trabajo es increíblemente perfecto y es muy reconocido en todos los recovecos de coleccionistas de figuras de acción y superhéroes, además, porque trabaja a gran escala (¡tamaño real!).

Diego comenzó a ser escultor de figuras de acción de manera autodidacta. Trabaja con un material especial de su propia creación llamado “Plasticera”, que es una mezcla entre plastilina, ceras y parafina. Según él, “es mejor que la arcilla tradicional, ya que no mancha y no seca nunca, eso te da tiempo de trabajar sin apuros”.



Yo soy fan de su trabajo y lo sigo en todas las comunidades en las que lo encuentro. También se lo encuentra en todo evento de cómic. Su trabajo es hiperrealista y llega al límite de la perfección con respecto a lo que es la anatomía humana, y los detalles del acabado en los personajes son al 100%.

La figura oficial de Kratos de God of Wars

Este año lo inauguró con una gran noticia acerca de su trabajo: Gaming Heads junto con PlayStation lo convocaron para hacer la primer escultura oficial de Kratos, el personaje del juego God of Wars de PlayStation en tamaño real, que la comercializarán para todo el mundo con la licencia de God Of War de Santa Monica Studios.

Acá nos muestra las fotografías del proceso de realización de Kratos:


Diego comenta en su site que “el busto tiene casi 70 cm de alto, es un poco más grande que una figura humana normal, que es como creo debería ser Kratos en la realidad..."





El anuncio en el sitio oficial de God of War.


Realmente es un increíble trabajo, además de que Diego tiene una profesión envidiable: poder hacer tus figuras de acción cuando quieras y como quieras, y encima vivir de ello.

Justo hoy anuncia en su página de Facebook que la serie de Kratos está absolutamente vendida.



Pocas veces se encuentran artistas fuera del ámbito web o digital, que sean tan activos en la red. Diego Gonzalez es muy comunicativo acerca de su trabajo y su técnica. Es usuario de Facebook, y participa en las comunidades de escultura en sitios especializados en el tema. Da clases y organiza talleres donde enseña a otros lo que él ha aprendido en estos años de dedicación exclusiva a su profesión. Podés ver más de su trabajo en su sitio web y su página de Facebook.

Yo colecciono muñecas de trapo, ¿qué coleccionan ustedes?

Github, la red social de los programadores, ha anunciado que lanzará un editor de código llamado Atom, el cual vienen desarrollando hace seis años... ¿cuántos commits tendrá ese repositorio?

Todo lo que presentan en este nuevo proyecto realmente me sorprende, y puedo extender sus capacidades infinitamente a como ellos lo anticipan: “a hackable text editor for the 21st Century”. Atom es una aplicación de escritorio basada en tecnología web que permite que tengas control total del editor. ¿Te imaginas las capacidades de un navegador integradas en el propio editor? Sí! esto es Atom, donde ahora podremos depurar nuestro código en tiempo real mientras lo escribimos.

¿Te parece poco?

Integración con Node.js

Una de sus características más fuertes es que tiene integración con Node.js, con el cual puedes iniciar el servidor desde el propio editor o elegir los paquetes que quieras integrar en tu proyecto.

Diseño modular para armarlo y desarmarlo a gusto

Atom está diseñado para que puedas modificar o crear módulos si lo necesitas. Presenta funcionalidades que vemos plasmadas en otros editores de código, tales como dividir el espacio de trabajo, la multiselección y navegar entre archivos de manera ágil.

La interfaz, comandos y demás características me recuerdan mucho a Sublime Text (que es el editor que actualmente uso), lo cual hará que sea muy fácil empezar la aventura con Atom.

Cómo conseguir Atom

Actualmente Atom ofrece una beta privada para Mac y próximamente en Windows y Linux. Para ser parte de esta beta sólo debes dejar tu email en su página oficial y en el transcurso de unos días te llegará la invitación.

Facebook ha tenido muchos problemas con su sistema de anuncios, Facebook Ads.

Un video de Veritasium denunció que, cuando haces ads para obtener likes, la inmensa mayoría de ellos son falsos. Poco después, un empresario de Toronto que ha invertido $600mil dólares, decidió hacer un análisis de su inversión y descubrió que su base de fans de millones de likes en múltiples pages era falsa y generaba cero conversiones y visitas legitimas.

Facebook resalta los likes al post que promueves, los likes a tu página y otra serie de métricas que no miden tu conversión real, sino "números de vanidad" en total control de Facebook. Números que sirven para tanto como los followers en Twitter: Nada.

Facebook Call to Action Buttons: zero action

Sin embargo, en Mejorando.la invertimos en Facebook Ads. No son increíbles para convertir, pero sí para enganchar a la gran audiencia orgánica del Page de Mejorando.la.

Para el lanzamiento del Curso Profesional de Frontend descubrimos los nuevos "Call to Action buttons". Botones al lado de los anuncios que permiten agregar mensajes como "Compra ahora", "Registrate" o "Descarga". Creamos un anuncio al que le dimos la misma cantidad de presupuesto para probar todos los botones y otro sin botón.


Los resultados:

Cantidad de clicks por anuncio

Porcentaje de clicks por anuncio visto

Eso fue triste. Los ads sin botón son claramente mejores que el nuevo invento.

Hacer Facebook Ads que funcionen y conviertan es un arte. No busques likes, sólo busca "engagement" cuando entiendes lo que quieres lograr y en general, apuntale a clicks y a conversiones usando Conversion Pixels.

Y si dudas o no estás dispuesto a dedicarle tiempo de Excel a FB Ads... mejor no inviertas en ellos.

El servicio de MySQL que maneja las bases de datos de las aplicaciones que corren en Google App Engine o en Google Computer Engine, anunció que ya tiene disponibilidad general, ahora con cifrado de datos de los usuarios, uptime de 99.5% SLA y soporte para bases de datos de hasta 500 gigas de tamaño.

Bases de datos más seguras y confiables

Ahora nuestras bases de datos van a ser más seguras y confiables, ya que todo el tráfico Cloud SQL será encriptado al pasar por la red interna de Google, todas las conexiones externas pueden ser encriptadas usando SSL (aunque esto puede aumentar los tiempos de respuesta), los datos son replicados varias veces en múltiples locaciones y las copias de seguridad automáticas vienen por defecto. De esta forma, si alguna persona no autorizada intenta acceder a nuestra información, verá únicamente datos cifrados.

Además, todos los hosts y aplicaciones que se quieran conectar a nuestros datos, deberán contar con una autorización previa.

Almacenamiento a precios mínimos

Podemos almacenar bases de datos a un precio muy favorable, desde instancias D0 a solo 0.025 dólares por hora hasta instancias D32 con 16 gigas de RAM. Lo bueno de todo esto es que sólo se paga por el almacenamiento que utilizamos, así que no habrá que reservar este almacenamiento con anterioridad.

Todos sabemos que el almacenamiento en la nube es muy cómodo en cuanto a precios, ya que no debemos invertir en una infraestructura completa para almacenamiento de datos a la que, probablemente, no le vamos a sacar todo el jugo.

Mejoras en la calidad del servicio

La calidad del servicio promete ser muy buena, ya que lo garantizan en un 99.95% y han puesto un muy buen estándar de disponibilidad. Por ejemplo, un solo minuto con una falla del 20% en la conexión es considerado como tiempo caído.

Google Cloud SQL es usado por grandes compañías como Costco, LiveHive y Livestream.

El servicio puede ser utilizado desde ahora en su sitio oficial.

Las herramientas musicales para dispositivos móviles están cambiando la forma en la que consumimos, creamos y difundimos la música. El gran gigante de la industria musical está a los tropiezos tratando de no quedar detrás de las tendencias que los mismos usuarios van imponiendo.

Uno de los huecos que todavía falta por explotar es el de las herramientas para los músicos profesionales, que de a poco van utilizando tecnología y dejando atrás las viejas prácticas, no solo por comodidad sino también porque el medio está cada vez más capaz de brindar las experiencias que el músico necesita.

A mí me encanta la música y en momentos he tenido que escribir algunas notas en el pentagrama pero buscando programas de notación musical me di cuenta que todos eran muy difíciles y sus interfaces dejaban muchísimo que desear, hasta que encontré Noteflight.



Noteflight es un editor de partituras online muy sencillo e intuitivo y presenta todas las opciones que un músico necesita. En el pasado, el editor estaba solamente basado en Flash pero luego hicieron una adaptación a HTML5, es responsive y optimizada para usar en iPad, iPhone y Android. Lo mejor es que se puede intercambiar entre el editor en flash y el HTML5. Nice!

Interfaz de usuario en una app de notación musical

Para agregar notas al pentagrama sólo hay que pasar el mouse por la línea o el espacio deseado del pentagrama ¡y listo! nada más sencillo. También tiene soporte para dispositivos con sistema touch. Si estás navegando desde un móvil y el pentagrama es muy pequeño de visualizar está disponible un piano virtual desde el cual, mientras tocas, se agregan las notas automáticamente al pentagrama.

Si sabes la notación americana se pueden agregar las notas por el teclado con su correspondiente nombre:

Código :

C - D - E - F - G - A - B
Do - Re - Mi - Fa - Sol - La - Si

Si deseas por ejemplo, hacer un tresillo, sólo seleccionas las tres figuras musicales y las agrupás con Ctrl+3. ¡Nada más fácil!

Se pueden configurar armaduras de clave, elegir el tipo de escala, múltiples instrumentos, agregar tresillos, etc., dinámicas, letras, acordes, y todo lo que un editor de partituras convencional trae.

Escucha la música que escribes

Lo más interesante es que tiene la funcionalidad de darle “Play” a la partitura que estás escribiendo, y se le puede asignar un instrumento cualquiera (las librerías de instrumentos suenan bastante bien y reales). Esta funcionalidad permite que aprendas notación musical de la manera más sencilla e intuitiva: aprendes desde el hacer y el experimentar.

Crea y comparte tu música online

Noteflight permite que sigas a usuarios y que estos te sigan. También permite que tus partituras sean privadas o públicas, permitiéndote compartir tu música a toda la comunidad y conocer las composiciones o arreglos musicales de otros músicos. Por ejemplo, si quiero conseguir la partitura del Nyan Cat con la letra y escucharla, allí lo consigo:



Hay foros internos donde se puede discutir acerca de música, estilos, historia, y hasta pedir un feedback de tus composiciones. Exporta archivos en midi y wav, e imprime en PDF.

En su versión gratuita se puede acceder a casi todas las funcionalidades y en su versión de pago llamada “Crescendo” tienen a disposición planes especiales de acuerdo a los tipos de uso para Individuos, Educación Primaria y Media, Instructores Privados, Educación Superior, Socios y acceso a la api para Desarrolladores y también se puede integrar con sistemas de e-learning como Blackboard, Moodle e inclusive Wordpress.



Contanos, ¿hacés música y has tenido necesidad de utilizar una app de notación o edición musical? En tu opinión, cuál nos recomiendas?

Prepros es un pre-procesador que compila LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml y Markdown, optimizando el flujo de trabajo. Creada por Subash Pathak, un front-end que logró empaquetar todos aquellos pre-procesadores que hoy en día nos hacen la tarea tan fácil.

Live Refresh

Prepros cuenta además con herramientas tales como el Live Refresh que hacen de nuestro navegador una ventana en vivo de nuestro código. Esto se logra gracias a un microserver estático que escucha en tiempo real nuestra interacción con el código y refresca cada vez que guardamos una modificación de los archivos, digo "los" ya que podemos trabajar con múltiples archivos a la vez.

Para obtener el Live Refresh solo debes instalar la extensión de Chrome.

Prepros soporta LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml y Markdown. Sin la necesidad de tener instalado Node, podemos contar con Stylus, Jade y muchos otros lenguajes más.

Soporte PC y MAC

Sin duda para aquellos que trabajamos en PC, ya sea por que nuestra empresa no pueda pagar un equipo Apple, y luego en nuestras casas sí usemos un entorno MAC, nos encontramos en la difícil tarea de obtener herramientas que hagan mas fluida nuestra dinámica de trabajo. Es por ello que una herramienta como tal sea multiplataforma y que su versión paga sea muy accesible, es motivo de fiesta.

Image Optimization, Live Browser Refresh y Built-in http server en la versión gratuita

Prácticamente contamos con el corazón de esta aplicación en su versión gratis, pudiendo acceder a la compilación de múltiples pre-procesadores, minificar y optimizar tanto CSS como JS con diferentes tipos de compresión. Cuenta con otras características como Image Optimization, que aplica un algoritmo de compresión a nuestras imágenes, Live Browser Refresh que permite trabajar con el navegador en tiempo real y Built-in http server que permite testear sin restricciones.

Características de la versión paga

En su versión paga, agrega características tales como:

• FTP 1-Click: Permite conectarnos vía FTP a un servidor y hacer deploy desde la misma APP.
  
• Remote Device Inspection & Debug: permite el control a los dispositivos sobre los cuales estamos testeando.
  
• Shareable Configuration File: Con un solo archivo .json podemos trabajar con nuestro equipo de fronts.
  
• Multi Device Testing: Trabajar al mismo tiempo con todo los equipos en nuestra red local.
  

Actualmente la app se encuentra en su versión 4.0.1 y sin duda ha madurado de una forma estrepitosa ya que no solo es más estable desde la versión 1.6.1, sino que incorporó herramientas tales como nib en Stylus, Jade, etc.

Porqué usar Prepros

Sin duda es una de las herramientas que tienen que estar en tu stack fron-end para crear un ritmo de trabajo más rápido y explotar a fondo tu creatividad. Anímate a los pre procesadores con esta hermosa herramienta que les traigo hoy.

Saludos y espero que este, mi primer artículo les sea de mucha utilidad.

Precomputing es una técnica que se usa para obtener datos antes de que el usuario entre a consultar. Estos datos son peculiares ya que pueden ser el resultado de una o muchas consultas a la base de datos. También tiene la característica de que para muchos usuarios esta información es relevante y es por eso que los cachamos.

Se pueden utilizar diferentes tipos de tecnología para hacer precomputing o cachear los datos como mongodb, redis, memcache. Estas técnicas son usadas por grandes empresas como Facebook, Twitter y Reddit.

Facebook usa un sistema de precomputing TAO, Twitter hace precomputing a todos los timelines y los mezcla para poder mostrar el timeline de amigos; Reddit es más simple ya que solo precarga los contenidos de las páginas de diferentes formas basado en las consultas (como por ejemplo los votos).



Queremos mostrarte las ventajas y desventajas de las técnicas al momento de cachar datos y a la vez ponerte al tanto de lo necesarias e inevitables que serán en el futuro.

Lo bueno

• El precomputing es más rápido.
  
• Bases de datos más pequeñas.
  
• Querys no tan complejos, realtime en memoria y listo para ser servido.
  
• Poca latencia al eliminar la base de datos de la consulta query.
  

Lo malo

Uno de los problemas al programar el sistema que ya tiene los datos precomputados puede ser que se repita demasiado el código si, por ejemplo, dentro de un equipo cada uno toma la solución por su lado y escribe su propio código para esta tarea. Entonces se hace muy difícil de mantener.

Claro que esto depende de la forma en cómo se implementen desde el principio el query y el caché. Hay cosas que no podemos cachar y hay cosas que tienen que sumarse al caché, estas técnicas pueden evitar una sobrecarga.

Estas técnicas de optimización se ven en Twitter, por ejemplo: con solo cachar todos los timelines se reduce el código repetido. Cuando le haces unfollow a un usuario simplemente dejas de consultar el caché de su timeline. También pasa cuando borras un tweet de tu timeline, que no significa borrarlo de todos los timelines de tus amigos, es muy simple.

Lo peor

La pregunta que todos nos hacemos es ¿por qué no sólo usamos la base de datos?, ya que es el camino más fácil de tomar, y la respuesta es:

• porque se centraliza el proceso de los datos en un solo lugar (que es la base de datos) con queries gigantes y es mucho trabajo para la base de datos, para cada proceso se usa una gran cantidad de memoria extra, y es mucho más complicado controlar todo esto junto en un solo lugar.
  
  
• porque es difícil explotar aplicaciones semánticas, así como sucede en Facebook: los resultados de las consultas están basados en la vida social y son el resultado de las consultas a las bases de datos, entonces se precomputan.
  

  Facebook :

  as efficient as MYSQL is at managing data on disk, the assumption built into the InnoDB buffer pool algorithms dont match the request pattern of serving the social graph
  
  
  
• porque cuando más trabajo hay por parte de los clientes (celulares, navegadores, tabletas) necesitamos ayuda del caché.

Es por todo esto que tenemos que evitar usar proyectos disponibles libres para cachar datos, tenemos que hacer nuestro propio sistema de caché para optimizar y que encaje perfectamente en nuestra aplicación. Hay que pensar en cachar datos computados, no cachar bases de datos.

¿Cómo optimizar el caché de ahora en más?

Mientras más somos y más dispositivos consumen nuestros datos, más tenemos que tener los datos listos.

Más celulares y más tabletas significan, desde una perspectiva técnica, que las bases de datos van a trabajar demasiado. Los clientes solo verán vistas de datos precomputados ya que gran parte del procesamiento del entorno (front) se hará del lado del cliente.



En el futuro encontraremos tres niveles de caché: el navegador o el celular, el caché en memoria y, por último, la base de datos. Cada nivel decide cómo mantener los datos listos para ser servidos al cliente.

¿A que le hacemos caché? ¿cachamos en memoria o en el cliente? ¿a mano o usamos un framework? ¿qué tenemos que mantener al día? para responder todas estas preguntas tienes que saber usar estas técnicas y ceñirte a las necesidades de tus usarios. Debemos ver cómo vamos a usar las diferentes tecnologías, y el conjunto de técnicas que serán el futuro que vamos a afrontar.

Aquí les dejo el video para entender mejor qué tan bueno puede ser trabajar el caché antes que la base de datos.

Usabilidad y experiencia de usuario han sido los conceptos siempre presentes en el Diseño, si bien estos términos hoy en día resuenan mucho en el ámbito Web, también son los pilares de otras ramas del Diseño como lo es el Diseño Industrial, el cual está enfocado a crear objetos para hacerlos útiles, prácticos o atractivos visualmente, con la intención de satisfacer las necesidades del ser humano.

Hoy en Cristalab te presentamos este review del Origami Case, un accesorio creado para ofrecer una gran experiencia a quienes usan un iPad. Su concepto se basa en uno de los artes manuales más tradicionales y enigmáticos del Japón: el Origami.

Usabilidad y experiencia de usuario en objetos de diseño

El Origami se basa en crear formas a partir de los dobleces que se le dan al papel. Este es el concepto de diseño del Origami Case y es con esta premisa que soluciona el problema que todos hemos tenido alguna vez al usar una tableta, y es la de no tener que sujetarla todo el tiempo, por eso es que su mejor rasgo es que puede adoptar diferentes posiciones en la cubierta para usar el iPad en diferentes ángulos y posturas para leer, escribir y navegar y hacer que la experiencia de uso sea más confortable para el usuario.

Características del Origami Case

• Auto weak y auto sleep, con sólo abrir o cerrar ligeramente la cubierta.
  
• Su instalación es muy fácil, solamente tienes que insertar el ipad de de frente hacer presión ¡y listo!

¿Qué trae el paquete?

• Microfibra para limpiar el iPad
  
• Dos coberturas plásticas para la parte trasera
  
• Una transparente y una negra
  
• La cubierta plegable awesome
  

Míralo en funcionamiento

¿Cuáles son tus accesorios favoritos? ¿Cuáles te gustaría ver reseñados en el canal de YouTube Mejorandola?

Si tu gobierno o tu empresa está bloqueando tu conexión a Internet. Como es el caso actual en Venezuela. Si están censurando sitios o servicios y quieres tener acceso libre, abierto y total a la web, aquí te explicamos cómo usar TOR sin conocimientos técnicos avanzados.

TOR (The Onion Router) es un sistema anti-censura de la web que hace que tu conexión rebote entre miles de puntos alrededor del mundo. Puede parecer lento cuando te conectes, pero es increíblemente efectivo. Nada estará censurado cuando uses TOR y es muy díficil de detectar.

Es Open Source y mantenido por un equipo de genios hackers. Cero preocupaciones.

TOR Browser

Entra al sitio web de TOR y descarga el TOR Bundle. Encontrarás versiones para Windows, Linux o Mac.

Al correr la descarga en Windows verás un dialogo de extracción


Elige una carpeta donde descomprimir TOR y ejecuta dentro el enlace llamado "Start TOR Browser".


Verás un panel de control que empezará a conectarse a los nodos de TOR. Tarda un rato pero funciona. Una vez listo, verás un navegador llamado TOR Browser, derivado de Firefox, abrirse.


TOR Browser está diseñado para navegar en la web con cero restricciones y completamente anónimo, sin dejar rastro. Cero miedo de ser rastreado.

En Mac OS X sólo ejecuta el archivo descargado y luego inicia "TORBrowser" y todo funcionará.



En Linux es un poco más complejo, pero eres linuxero, la consola no te asusta.

¿Es seguro usar TOR?

TOR es la red más segura del mundo. No es infalible pero mejora muchisimo tu conexión y es muy díficil que un atacante lo detecte. Anonimiza toda tu conexión. Ha sido usado ampliamente en China, Siria, Libia, Egipto y para casos especiales en Estados Unidos.

Es usado todo el tiempo en el planeta.

Mucha suerte y fuerza, Internet está con ustedes.