Angry Birds Go

Pájaros y furiosos, llega un nuevo juego de Rovio

Estuve al menos 15 segundos pensando en un juego de palabras para el titulo pero lo mejor que logré fue eso, que desastre. Bueno, no importa, porque a partir del 11 de diciembre de éste año podremos disfrutar de un nuevo juego de la serie Angry Birds, pero en ésta ocasión con un enfoque “totalmente nuevo”, si es que nunca jugaron Mario Kart.

El nuevo juego cambia totalmente la dinámica, ya que se trata de carreras de autos en el cual se pueden “tunear” los mismos y que cuenta con una gran cantidad de personajes con diferentes especialidades.

El juego será gratis y estará disponible para Android, iOS, BlackBerry 10 y Windows Phone 8 ¿Qué? ¿Blackberry qué y Windows cuánto? Si, Rovio se toma el multiplataforma en serio.

Después que vean el trailer probablemente tengan recuerdos de los viejos juegos de Family y Sega, y de algunos mas nuevos como Mario Kart, no se preocupen, pasa hasta en las mejores familias.

Sitio oficial

Maquillando gráficos en D3.js

Siguiendo con la escueta introducción a D3.js, en ésta ocasión la idea es hacer un poco mas lindo el gráfico feo y aburrido del tutorial anterior, para ello se le va a agregar color y etiquetas para identificar las barras.

Llega la primavera, llegan los colores

El atributo fill es el que le da color, literalmente, a los elementos SVG, su uso es igual al de otros atributos, como los que dan las coordenadas o el tamaño de los elementos, obviamente, los valores que se le asignan deben ser colores validos, pudiendo usar varias sintaxis, RGB, Hexadecimal o nombres explícitos. Con D3 asignar el valor de los atributos es siempre tan sencillo como .attr(‘atributo’, valor), magia!

Pero ¿y esa barra de que es?

Las etiquetas hacen de nuestro mundo un lugar menos caótico (?) ¿que hubiese sido de Monk sin etiquetas? Agregar etiquetas es simple gracias a, sí, a D3, aunque puede que necesiten un poquito de matemática.

Para las etiquetas vamos a necesitar texto, por suerte SVG viene armado hasta los dientes (?), y tenemos elementos para ésto (text). Con D3, además, agregar un elementos de texto es similar a lo que se hizo con las barras, solamente cambia el tipo de elemento, obviamente, y algunos atributos.

Barras etiquetadas

Okey, eso es …¿útil?

Ahora hay que ajustar la posición de las etiquetas, lo que no es tan difícil.

Lo primero es centrar la posición de las etiquetas, en éste momento la posición está dada por la siguiente formula

i*(svgwidth/datos.length)

Para centrarlas debemos modificar la formula para centrarla dentro de la barra, o sea que deberíamos sumarle a la posición la mitad del ancho de las barras, que es (svgwidth/datos.length)/2, por lo que la formula de la posición respecto a x queda:

i*(svgwidth/datos.length)+(svgwidth/datos.length)/2

Pero como no podía ser de otra manera, tenemos un problema nuevamente, ya que si el texto es largo no va a queda centrado, pero a no desesperar, también hay solución para eso.

Denle la bienvenida al atributo text-anchor, éste atributo lo que hace es alinear el texto respecto a un punto dado, tiene 4 configuraciones posibles : start, middle, end e inherit.

  • Start: El texto comienza en el punto dado.
  • Middle: El “medio” del texto queda en el punto dado.
  • End: El texto termina en el punto dado.
  • Inherit: Hereda la configuración del elemento padre.

En caso de que no se especifique el valor por defecto es start.

Ésto es lo que llevamos hasta ahora.

etiquetas centradas text-anchor

La etiqueta está en orden!

Por ultimo, algo que depende del gusto de cada uno, pero en mi caso prefiero que el texto éste contenido dentro de la barra, pero en realidad hay que considerar nuestros datos antes de tomar ésta decisión.

Encerrado y colorido

Los últimos toques antes de dar por terminada la obra, ojo, ésto sigue, aún nos faltan los ejes y la normalización.

Para llevar las etiquetas al interior de las barras vamos a jugar con la posición respecto a y, es tan simple como sumarle un valor determinado a la posición ¿por qué determinado? Porque va a depender del tamaño de las etiquetas, sino podemos terminar con la mitad del texto adentro de la barra y el resto afuera.

Probablemente alguien se haya perdido ¿Restarle? ¿Con que te drogás, Tomás? Ésto se debe a la forma en que maneja los ejes SVG, y pasa con casi todo lo relacionado a gráficos en la PC, la esquina superior izquierda se considera la coordenada (0,0), cuando estamos acostumbrados de las matemáticas a trabajar con el origen de coordenadas ((0,0)) ubicado en la esquina inferior izquierda, pero bueno, detalles, imaginen que estamos en el plano y nuestro gráfico se encuentra en el cuarto cuadrante.

Los colores, como en el resto de los elementos SVG se dan con el atributo fill.

etiqueta coloridas d3js

Etiqueta blanca!

Finalmente, el código, mi único héroe en éste lío.

Y el Fiddle para que se pongan manos a la obra.

En el código del texto pueden ver que hay varios atributos que no comenté en el tutorial, en realidad ésos atributos son “compartidos” con CSS y son bastante sencillos.

  • font-family: nos permite asignar la fuente, se pueden separar con comas varias fuentes diferentes en caso de que el usuario no las tenga instaladas en su PC.
  • font-size: es el tamaño de la fuente en pixels, en éste caso.

Pueden ver que al atributo y del texto se le suman 15 para “meter” las etiquetas adentro de las barras, y también le restamos 1 al width de las barras para que estén separadas.

Espero les haya sido de utilidad éste tutorial, cualquier consulta o sugerencia es bienvenida.

 

La publicidad en Internet, la ética y Adblock

Se acaba, se acaba, Adblock!

En los días que corren la publicidad en Internet está afrontando un cambio de paradigma, si bien por el momento no hay mucho revuelo, cada vez es mas común encontrarse con personas usando plugins que bloquean los anuncios de los sitios web, pero ¿es esto culpa de los usuarios? ¿como van a hacer los pequeños sitios para subsistir sin Adsense? ¿que fue lo que procovó todo esto?

Como siempre, no hay una sola causa, pero la ética es una de las principales. El avance de plugins como Adblock se debe en gran parte a las publicidades cada vez mas invasivas que se adueñaron de gran parte de Internet, y no solo en sitios “grises”, sino que muchas veces en grandes portales donde uno esperaría que estas cosas no sucedan, y a medida que los usuarios generan una especie de inmunidad a éstas publicidades aparecen otras peores, cada vez mas invasivas, y el ciclo se repite y empeora.

¿No me creen? Facebook tiene planeado lanzar publicidades en vídeo que se reproducen automáticamente, y eso es algo preocupante, la sed de saciar a los accionistas lleva a Facebook a realizar estas practicas, y al ser un sitio muy usado hace que el ritmo de adopción de plugins como AdBlock se dispare, siendo los pequeños sitios, como éste, los que se ven mas afectados, sitios donde en general se busca un balance entre la publicidad y el contenido, y en donde muchas veces los números no cierran siquiera para pagar el alojamiento.

adblock

Adblock, el asesino silencioso (?)

 Otros modelos

La publicidad no es la única forma, pero la realidad es que cobrarle a los usuarios por el contenido no es algo que se pueda aplicar en cualquier sitio. Por ejemplo, si estamos buscando algo en Google, no podemos pagar en cada sitio que entramos para ver el contenido, o sea, se puede, pero eso trae complicaciones y seguramente aparezcan sitios que te cobren de antemano y al final no tengan contenido que valga la pena. Todos a la Wikipedia!!!

En sitios con una audiencia fija el modelo de cobro por contenido es mas factible, supongo que varios de los usuarios fieles no tendrían problemas en pagar. Pero al mismo tiempo tiene sus complicaciones. Los lectores van a necesitar una tarjeta de crédito o tener dinero en Paypal para pagar, lo que pondría otra barrera para los usuarios, y si hay algo que se debe considerar siempre es la simpleza para los usuarios.

Referidos y posts pagos, éste es un método que podría funcionar, y uno que se usa hoy en día y funciona bien. El problema es que si reducimos los ingresos a ésta modalidad se puede llegar a comprometer la diversidad de un sitio, y con el tiempo incluso perder la credibilidad, imaginen entrar en una web que cada 2 artículos haya uno sobre casinos o poker.

¿Será la resistencia al cambio?

Otro punto a considerar es la resistencia al cambio, algo conocido por cualquiera con el experiencia en el área del software, a los usuarios les cuesta acostumbrarse a los cambios, y no porque lo “nuevo” sea difícil o lo que sea, sino porque los humanos somos seres de costumbres, y las nuevas experiencias nos generan una especie de incomodidad.

Tal vez, en unos años, alguno de los modelos presentados anteriormente se imponga y nos resulte natural, pero mientras tanto, habrá que luchar por subsistir.

Introducción a D3.js

D3.js es una librería hecha en Javascript que trabaja sobre SVG, HTML y CSS, y tiene como principal objetivo la generación de gráficos a partir de datos. No es la única opción, ya que hay varias, por ejemplo Highcharts, pero ésta ultima tiene la desventaja de no ser gratuita para uso comercial.

Hay que considerar que al usar SVG la compatibilidad con navegadores obsoletos es un tema complicado, por ejemplo el caso de IE8 y versiones anteriores, aunque por suerte la participación de mercado de éstos ha bajado mucho en los últimos tiempos.

D3 es capaz de hacer muchas cosas, no! mas cosas todavía, pero en éste tutorial vamos a empezar con lo básico para “dejarlo andando”.

Primeros pasos, digo, gráficos

Para los que hayan usado jQuery la sintaxis de D3 les va a parecer muy familiar, pero si no tienen experiencia previa con Javascript no se preocupen, es bastante sencillo. Lo recomendable es que lean un poco sobre el lenguaje para hacer mas fácil las cosas, pero como casi todo, con confianza y ganas se puede aprender.

Para usar D3.js solo basta incluirlo entre los recursos que necesita el sitio para funcionar, ésto es muy sencillo y solo requiere del uso de la etiqueta script de HTML para que el navegador cargue la librería.

El código para crear el gráfico más simple y aburrido de la historia. También pueden jugar con el ejemplo en éste fiddle.

Vamos por partes, dijo Jack

datos, se trata de los datos que va a usar la librería para generar los gráficos. En éste caso están incluidos en el script, pero lo normal es mediante cargarlos dinamicamente mediante AJAX. Además, D3 ofrece funciones para lidear con representaciones comunes de datos, como CSV, que son valores separados con comas.

Obviamente, no es necesario que la variable se llame datos, pueden ponerle el nombre que quieran. Otro detalle, lo normal es que nuestros datos estén guardados en un array (vector).

d3.select(‘algo’), se trata de una función de D3 que nos permite seleccionar el elemento en el cual queremos embeber el SVG, o lo que sea que fuésemos a embeber (D3 permite manipular cualquier elemento de HTML, dejemos ésto para mas adelante).

append(‘svg’), es la función responsable de “embeber” el elemento dentro del otro elemento que seleccionamos, lo que en realidad sucede es que select selecciona el elemento que queremos como objetivo, y las funciones encadenadas, o sea las que se llaman luego del select mediante .nombreFuncion trabajan sobre el resultado de la función anterior. En éste caso append añade un nodo hijo al elemento con id gráfico. En éste punto es cuando podemos decidir embeber otros elementos, por ejemplo párrafos (p) si tuviésemos un array con frases.

attr, tiene como objetivo asignar un valor a las propiedades de los elementos. En el caso del SVG le damos valor a los atributos alto y ancho.

Ahora que ya tenemos creado nuestro SVG vamos a añadir elementos, en éste momento es cuando los hechizos y la magia de D3 nos iluminan.

selectAll(‘rect’), éste método nos devuelve una selección vacía a la cual se le van a “añadir” (bind) los datos. En éste caso vamos a generar barras, por éso el nombre del elemento a seleccionar, rect.

data(datos), “enchufamos” los datos, lo que sucede acá es magia negra, se cuentan los elementos y se parsean, de ahora en mas, todos los métodos que llamemos se van a ejecutar tantas veces como elementos tenga el conjunto de datos que pasamos.

enter(), por fin, vamos a “unir” los datos con los elementos, es en éste paso donde el hechizo se ejecuta. Ahora falta especificar el tipo de elemento, lo que se hace en el paso siguiente.

append(‘rect’), se especifica el tipo de elemento que se quiere añadir al SVG.

El resto de los métodos son asignaciones de valores a los diferentes atributos de cada elemento creado.

Las funciones anónimas

Como ven en las asignaciones de valores a los atributos, las funciones anónimas son utilizadas para acceder a los valores de los datos y al indice del array. El primer parámetro siempre es el dato y el segundo el indice, pueden usar el nombre que quieran, no es necesario que los llamen d e i.

En el ejemplo se usan por demás, ya que solo son necesarias cuando necesitamos información de los datos, como su valor para calcular la altura, o del indice, para calcula la posición respecto del eje x para que no se superpongan los elementos.

Dentro de las funciones pueden hacer lo que quieran, lo que deben tener en cuenta es que deben devolver algo que se corresponda con el atributo que están usando, devolver una letra cuando están definiendo una altura va a dar un error.

Su mejor amiga, en las buenas, y sobre todo en las malas

La consola de Javascript de los navegadores es uno de los mejores elementos para aprender sobre los detalles de D3, y mas aún cuando tenemos errores, ya que enseguida pueden ver que está provocando el error y en que linea del código se encuentra.

Para acceder a ésta en general deben hacer clic derecho en algún lugar de la pagina y seleccionar “Inspeccionar elemento”, después van a la pestaña consola y voilá. Otra forma, al menos en Chrome, es con CTRL+MAYUS+j.

Lo bueno se acaba

La idea es que ésta sea la primer entrega, en la próxima vamos a hablar sobre como hacer nuestros gráficos un poco mas bonitos.

Outlook estrena IMAP

Outlook.com ahora soporta IMAP

En junio de éste año Outlook.com cumplió un año de vida, si bien heredo una gran cantidad de la base de usuarios de Hotmail, el servicio carecía de una funcionalidad importante para acceder desde aplicaciones nativas en las diferentes plataformas móviles, pero desde hoy ésto cambió, ya que ahora Outlook soporta IMAP.

Outlook.com

Datos para configurar IMAP

IMAP para Outlook.com

  • Servidor: imap-mail.outlook.com
  • Puerto: 993
  • Encripcion/Cifrado: SSL

SMTP para Outlook.com

  • Servidor: smtp-mail.outlook.com
  • Puerto: 587
  • Encripcion/Cifrado:  TLS

No solo IMAP, también OAuth

Sin dudas IMAP fue un paso en la dirección correcta, ya que los competidores ya contaban con éste servicio, y además, OAuth es sin dudas otra gran mejora que recibió el producto, ya que ahora permitirá a los desarrolladores de aplicaciones utilizar una cuenta de Outlook para loguear a sus usuarios.

Pueden leer más al respecto, sobre todo de la parte de IMAP, en el blog oficial de Outlook.com, además, parte del equipo del producto se sometió a una sesión de preguntas y respuestas en Reddit.