Páginas

miércoles, 28 de octubre de 2015

Juego de los Descamisados - Construct2

Durante octubre lanzamos varios productos en el marco del 70 aniversario del 17 de octubre de 1945.

El Documental Transmedia 70 Octubres es un trabajo de 5 meses de: recopilación de archivo de distintas fuentes, entrevistas, fotografía, edición de video, producción y difusión desde principio de septiembre a fines de octubre.

El Documental cuenta con 3 cuentas de Twitter
@70octubres
@descamisado1945
@peron1945

Una cuenta en Facebook , un canal de Youtube, un sitio web, un video 360 de Berisso y un juego realizado con la herramienta Construct2 (versión gratuita)

El juego se puede ver en: Juego de los Descamisados

La herramienta es espectacular para quienes empiezan con la producción de Juegos y para enseñar en niveles básico e intermedio, permite hacer juegos 2D entre otros muchos.

El juego de los descamisados es un juego pensado para escritorio, pero teniendo algunos detalles en cuenta para que se pueda probar en el celu.
Sos un empleado de un frigorífico de Berisso y el objetivo es juntar la mayor cantidad de compañeros y llevarlos a plaza de mayo para que pongan los pies en la fuente.

A continuación les pongo algunas capturas de pantalla y eventos para replicarlo.

Fuego:


Agua:
Para la parte del puente levantado de Avellaneda, cambiamos todas las propiedades del personaje principal y de todos los descamisados que entran con él.



Ranking: Web service creado con Slim Framework, y NotORM. Acá podés ver detalles de la parte de Construct2: 


Luego terminaré de poner capturas... no puedo dejar de jugar!! :D 

Update: no puedo dejar de agradecer a Cata Laval y a Lu Módena por la enorme ayuda para hacer el juego.


miércoles, 21 de octubre de 2015

Debate chequeado - visualizaciones, d3, isotipe y fullpage


Esta semana estuvimos junto a Alvaro Liuzzi y Maxi Ponz creando unas visualizaciones para Chequeado.com.

Se pueden ver en http://chequeado.com/debatechequeado/

Algunas de las tecnologías que me ayudaron a crear la página:

  • Las secciones con altura de 100% y arrastre completa por sección, vínculos desde el menú y algunos detalles más gracias a FullPage.js 
  • Las visualizaciones de círculos con gravedad al centro y arrastre  realizado gracias a las librerías d3.js, geniales y llenas de documentación.
  • El filtro de Bloques de datos chequeables y el de videos fue realizado con Isotipe. En el de videos se sumó la posibilidad de un filtro exclusivo por temática pero con un OR por candidato para lograr el versus. Básicamente se va actualizando un array de filtros y luego se inicializa el isotipe con una función como filtro y el array como parámetro.
  • La nube de Tags trae por ajax los discursos completos y parciales de los candidatos, es cierto, fue una tentación filtrar las palabras y hacerlo estático... pero no. Los colores se toman de un array con d3.scale.ordinal().range. Me baso en esta nube de tags: https://www.jasondavies.com/wordcloud/
  • Los tags que aparecen flotando abajo de los círculos y las palabras fueron hechos utilizando Tipsy, sumando algún parche para que anduviera bien en firefox.
Espero que le sirva a alguno!