Cuida tu vista regulando el color de pantalla con f.lux

Nunca pensé sentir tanta tensión en la visión por mirar pantallas luminosas durante todo el día. En algún momento de mi vida incluso pensé que mis jóvenes ojos eran invencibles. Luego, ya hace como 3 años, empecé a tener dolores de cabeza agudos al final de cada día acompañados de fastidios como aquellos en los que te entra algo casi microscópico debido al viento, finalmente decidí medirme la vista, hace un mes presente los mismos síntomas y tuve que cambiar la medida de los lentes por segunda vez,  me di cuenta de que además de mis lentes necesitaba cambiar algo adicional.

Decidí finalmente dar un cambio y empecé a googlear  y encontré a f.lux es una aplicación que cambia la temperatura de color de la pantalla, la adaptación de la luz que se ve a la hora del día, lo que ayuda a reducir la fatiga en la vista. Hay una nueva versión beta que trae algunas mejoras realmente útiles.

Por la mañana y por la tarde, verá la luz de color azul la cual la pantalla normalmente empuja hacia fuera. Cuando se pone el sol, la luz cambiará a un color más rojizo, y cuando cae la noche, va a convertirse en una luz aún más profunda de color rojo. Cada paso que el color es adaptable, así que usted puede decidir la intensidad del color.

Es normal ver a la luz azul durante el día, pero a medida que se vuelve más oscuro, esa luz fastidia en los ojos por su intensidad. La luz rojiza es más soportable en los ojos, sobre todo por la noche, es por eso que se utilizan las luces rojas para preservar la visión nocturna.

Para cualquier persona que pasa horas detrás de una pantalla, f.lux es una aplicación obligatoria a mi parecer. Pasamos un montón de tiempo y dedicamos mucho esfuerzo en asegurarnos que utilizamos teclados ergonómicamente correctos, sillas y escritorios para nuestra postura, así que creo que es tiempo de que demos a nuestros ojos un nivel similar de tratamiento. Hasta la próxima.

Editor de gráficos web con hoja de cálculo en google drive

Después de un largo tiempo ausente me anime a publicar algo así que al actualizarme un poco en visualization encontré un componente gráfico muy útil que se llama chart editor, para visitar la página y descargar el código original en code playground click aquí. Así que me puse a modificar un poco el código del editor original lo cual iré comentando en este artículo.

Primero debemos entender como es que genera los diferentes tipos de gráficos este asistente en web, por lo general podemos usar un rango seleccionado de celdas de una hoja de calculo alojada en google drive, debemos tener en cuenta que tal hoja de calculo debe estar en modo compartido público de los contrario no podrá cargarse la data, hay otro modo de usar este generador de gráficos web al establece un data table haciendo uso de JSON lo cual publicaré en otro artículo.

Entonces manos a la obra, primero debemos crear una hoja de calculo en drive y compartirla como pública de la siguiente manera:

Después click en el botón compartir y definir como público.

La dirección pública generada por drive de mi hoja de cálculo por ejemplo es:

https://docs.google.com/spreadsheet/ccc?key=0AplEIWl3vfe3dEk2TkJrdjBESkpkcHFJRV9lLUJ0bmc&usp=sharing

Luego modificamos el código del chart editor en el campo denominado dataSourceUrl y establecemos el rango de celdas en ese campo

Primero debemos cambiar el parámetro llamado key por el parámetro key de la dirección publica generada por drive de nuestra propia hoja de calculo, también el parámetro range en mi caso puse B3:C5 pues es el intervalo en el que se encuentra la data en la hoja de calculo (notar el intervalo en la segunda imagen de este articulo que muestra el contenido de la hoja de calculo).

Finalmente probamos el código abriendo el archivo html modificado en el navegador

Para cambiar de tipo de gráfico solo deben darle click en la opción abrir chart wizard y si quieren obtener el código estático para embeberlo en cualquier pagina denle click en obtener embed y copian el código generado en el text area de la parte inferior.

Vale resaltar que modifique un poco el código original del chart editor de google code playground para que me generase un código embebido y así poder usarlo en todos lados sin necesidad de conexión a internet, si alguien encuentra otra forma de hacerlo por favor compartirlo. Finalmente les dejo mi código modificado del chart editor a continuación: Ver/Descargar Código HTML.

Crear Reportes Gráficos Con Google Visualization

La semana pasada me tope con un requerimiento particular, este consistia en crear un reporte gráfico(especificamente un pie chart) pero sin usar controles predefinidos en dll y pues digamos que ahora la gente no esta dispuesta a perder mucho tiempo, encontré dos curiosas alternativas dadas por google una es Google Visualization y la otra es Google Chart las dos son buenas sin embargo elegí la primera por que daba mejor vistosidad por su contenido y manejo de eventos. Mientras en Google Charts se consigue generar una imagen estática, en Google Visualization se consigue una animación, por ejemplo se puede dar click en una sección del pie chart y se puede observar el detalle. El resultado fue así, aunque esta es solo es la captura de pantalla del html...
Las lineas que genere son las siguientes:

data.addRows(5);
data.setValue(0, 0, 'Willy');
data.setValue(0, 1, 27);
data.setValue(1, 0, 'Cesar');
data.setValue(1, 1, 10);
data.setValue(2, 0, 'Harold');
data.setValue(2, 1, 5);
data.setValue(3, 0, 'Jorge');
data.setValue(3, 1, 8);
data.setValue(4, 0, 'Marco');
data.setValue(4, 1, 7);

El 5 de la primera linea es el numero de areás que va tener el pie chart, por cada registro se añaden dos lineas por ejemplo para willy se añaden estas dos lineas

data.setValue(0, 0, 'Willy');
data.setValue(0, 1, 27);

siendo la primera el nombre y la segunda el valor recuperado, el porcentaje lo calcula el mismo web service de google no deben preocuparse en generar eso. En este caso el ejemplo es estático sin embargo se pueden generar estas lineas desde cualquier lenguaje como java, php, asp o c sharp.

A continuación dejo el código ejemplo... Saludos
Descargar Ejemplo