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!

lunes, 18 de mayo de 2015

Validaciones avanzadas en Laravel 4.2

Quería compartirles este pedazo de código de ejemplo que tal vez salve a más de uno de un aprieto.

Imaginensé que tienen una tabla de viajes y una tabla de pasajes. Los asientos dentro de la tabla de pasajes se pueden repetir pero no para el mismo viaje. Las reglas de laravel nos quedan chicas y acá hay una posible solución, crear una función que modifique las reglas dinámicamente pasando parámetros desde el controlador. (valido solo el asiento)

<?php
public static $rules = [
            'create' => [
                'asiento_id' => 'required|unique:pasajes,asiento_id,null,asiento_id,viaje_id,:id'
            ],
            'update' => [
                'asiento_id' => 'required|unique:pasajes,asiento_id,:idasiento,asiento_id,viaje_id,:idviaje'
            ]
        ];
        

public static function rules( $action, $merge=[], $id=false, $search=':id')
        {
            $rules = static::$rules[$action];
            if ($id) {
                foreach ($rules as &$rule) {
                    $rule = str_replace($search, $id, $rule);
                }
            }
            return array_merge( $rules, $merge );
        }
?>

Entonces desde el controlador podemos validar


<?php
$validator = Validator::make($data, Pasajes::rules('create', [], $data['viaje_id']));
?>
Y la función reemplazará :idviaje por el código del viaje en el string de validación.
Lo mismo si queremos pasar más de un parámetro ya que str_replace admite remplazar arrays.


<?php
$validator = Validator::make($data, Pasajes::rules('update', [], array($data->pasajero_id, $data->viaje_id, $data->asiento_id), array(':idpasajero', ':idviaje', ':idasiento'))); 
?>
Solamente hay que tener cuidado con el orden en los array.

saludos!!

viernes, 30 de enero de 2015

#FuerzaVicente




Todos los años en la Secretaría hacemos una tarjeta animada para desearles a todos nuestros compañeros unas felices vacaciones y un mejor año, sin embargo la tarjeta 2014 la decidimos dedicar a un nene muy especial, Vicente Albarracín.

La idea de la tarjeta fue hacer que cada uno de sus familiares y amigos le dejaran un mensaje de fin de año a Vicente a través de una estrella fugaz. Cada persona hace click en una parte del cielo y se abre un pequeño formulario para dejar los datos, una vez que envía el mensaje queda su estrella en el cielo y se suma al resto de las estrellas, así cuando Vicente haga click en la estrella aparece el mensaje y la estrella se vuelve fugaz.

Técnicamente la tarjeta se realizó utilizando un servicio web con SLIM, NotORM para las consultas a una base MySQL, con jQuery se hace la llamada AJAX para guardar los datos, SemanticUI para los cuadros de texto flotantes.

El diseño estuvo a cargo de Anabel Garbet y de Catalina García Laval, zarpadas.

Podés ver la tarjeta animada en este link