Maquetación Sistema Web para Acción BTL. 04/01

[LeandroBraier]

@FAAREIA , necesitamos que maqueten de forma ultraultrasimple pero prolija (es más un backend que un front end) una serie de pantallas web que después @mkreyness usaría para un sistema que estamos armando para Paty en Chile.

Te cuento el proceso cómo sería para que tengas una perspectiva general:

En una playa hay un stand de Paty con toro mecánico en el medio con un cartel "Subete a la Leyenda".

PASO 1) Llega el participante y la promotora lo logea en una PC o Tablet con nombre, apellido, mail y número de orden. A cambio de los datos la promotora le da un número que tiene impreso y lo registra en el sistema también junto con los datos. (AQUÍ HICE CAMBIOS EN LOS CAMPOS A INCLUIR EL 04/01 *LEAN)

PASO 2) Alrededor del toro hay 2 cámaras de video. Cuando el participante ve su número en la pantalla gigante del stand sube al toro. El coordinador valida en su propia PC (que es la que usaremos de base para la grabación de los videos) que se trate del número correcto y, si lo es, activa la grabación de cámara. El operador del Toro arranca el juego.

PASO 3) Cuando el participante cae del toro, el coordinador presiona Stop en la grabación de video. El participante se va, llevándose un Flyer de la acción que explica el proceso.

PASO 4) Al terminar la jornada, subimos todos los videos grabados en el disco rígido a un servidor de Amazon. Nuestro sistema de FFmpeg los arma. Cada video queda disponible desde una landing propia con un botón de "compartir" que sube el archivo de video al Facebook del participante. Calculamos que a 50 videos por día no tardaría ni 2 hs en subirse.

PASO 5) Al día siguiente, el participante recibe un mail con el link a la landing de su video. Allí puede verlo y con el botón "compartir" subirlo a su propio Facebook. El sistema entiende que ese video ya está subido en el perfil de Facebook del usuario y se puede eliminar en el corto plazo.

Lo que te pido a continuación abarca Paso 1 a Paso 3. La landing mencionada en el Paso 4 y 5 te la paso después ya con un diseño más armado.

KEYVISUAL DE LA CAMPAÑA Podés descargarlo de este wetransfer:

https://www.wetransfer.com/downloads/53d253c0be7f1b73e4e8fb98d95c8da820151223173153/36a870fb4d2defa647c8354c868a216920151223173153/ebd4f1

PANTALLAS A DISEÑAR Son todas pantallas independientes por ahora, no hace falta que las vincules.

1- PANTALLA DE LOGIN

Dejanos tus datos y súbete a la leyenda!

Nombre + CAMPO DE TEXTO Apellido + CAMPO DE TEXTO Dirección de email + CAMPO DE TEXTO Número de orden: + CAMPO NUMÉRICO

(AQUÍ HICE CAMBIOS EN LOS CAMPOS A INCLUIR EL 04/01 *LEAN)

Botón de INGRESAR

Al hacer clic en ingresar, aparece un pop up.

POP UP DE FONDO LISO CON MENSAJE: “Gracias por dejarnos tus datos para subirte a la leyenda. Ahora, ¡valor!

2- PANTALLA QUE INCLUYE TODO LO QUE VE EL OPERADOR MÁS LO QUE MUESTRA LA PANTALLA DEL NÚMERO DEL TURNO QUE TOCA

Es decir, esta pantalla debe ser de 2560 de ancho por 720. Dentro de eso, la mitad izquierda mostraría el número que toca y la mitad derecha lo que se ve en la pantalla del operador. Ambas son independientes

----2- MITAD IZQUIERDA: NUMERO DE TURNO

Fondo liso con un nombre apellido y número gigante en el centro.

-----2- MITAD DERECHA: PANTALLA CON REC Y STOP DE LA GRABACIÓN

Incluye: número de turno y datos del participante en cuestión para que el coordinador los valide y queden como metadata y titulo del video.

Hay una flecha adelante y una detrás de los datos que permiten pasar al siguiente número o volver atrás en caso de ser necesario.

Aquí se ven 2 pantallas 16:9 una debajo de otra para monitorear lo que se está grabando.

Botón Rec Botón Stop

IMPORTANTE: Cada vez que se presiona REC vuelve a grabar desde el principio, aunque ya esté grabando.

Mensaje de "Grabando", mensaje de "Finalizado".

Se suman 3 botones abajo a la derecha que permiten elegir si se graba con 2 cámaras, solo con la cámara 1 o solo con la cámara 2. Una vez seteado esto, automáticamente queda por default para el resto de los pendientes de la lista.

5- POP UP QUE MUESTRA LA BARRITA DE LOADING DE CÓMO SE ESTÁ GUARDANDO EL VIDEO EN EL SISTEMA

6- POP QUE DICE:

¡VIDEO GUARDADO!

AGREGADOS DEL 04/01

7- PANTALLA CON LISTA DE PARTICIPANTES EN NUMERO DE ORDEN

Debe tener todos los datos que tenemos del participante y si ya tiene el video grabado o no. Cada fila de la lista es clickeable para ir a la pantalla que graba ese video. Si ya está grabado no aparece en la lista.

Confirmame si podemos tenerlo para el lunes. Pensá que posiblemente el lunes te paso el pedido de maquetación de la landing que si va en Front end y es más delicada.

abrazo

[FAAREIA]

Ya estamos preparando algo lea, que tamaño va a tener la tablet? 1024x768? fullscreen no? La pantalla que muestra el número y el proceso de grabación es una tele con que resolución?

[LeandroBraier]

Si, es full HD, ambas pantallas. Las pantallas van a ser todas de PC, nada de Tablet al final. Con lo cual piensanlas todas como pantallas iguales en principio. Widescreen full hd.

abrazo

[LeandroBraier]

@FAAREIA ahí actualicé los pedidos para este maquetación, corrigiendo detalles de las pantallas ya pasadas y sumando una pantalla, la 7, que muestra un listado de participantes pendientes de grabación con sus datos y permite clickear en cada uno para grabarlo.

Esto necesitaríamos tenerlo en primera versión maquetado para el miércoles (dentro de 2 días) Lo ves posible?

[LeandroBraier]

@braulio-evangelisti porfa repasá los detalles de vuelta del pedido, modifiqué varias cosas hoy luego de una reunión. Necesitaríamos tener una primera versión de esto miércoles o a más tardar el jueves, que Fede ya va a estar de vuelta.

[LeandroBraier]

@braulio-evangelisti Como venimos con esto? Hoy tendremos algo para ver ya?

@FAAREIA me comentó que hoy arrancaba de vuelta. Ahora le estoy escribiendo y te aviso.

[braulio-evangelisti]

Lea arme una carpeta a btv porque no tengo ningun dato de algun hosting de Paty, me apure lo mas que pude para terminar todas las pantallas que faltaban hoy, seguramente va a faltar pulir esto, espero tu feedback.

http://www.benteveo.tv/_patystand/01-usuario-nuevo.html http://www.benteveo.tv/_patystand/02-usuario-confirmado.html http://www.benteveo.tv/_patystand/03-grabador.html http://www.benteveo.tv/_patystand/turno.html http://www.benteveo.tv/_patystand/05-video-guardando.html http://www.benteveo.tv/_patystand/06-video-guardado.html http://www.benteveo.tv/_patystand/07-participantes-lista.html

[LeandroBraier]

Yo los veo perfectos Brau!! Solo un detalle:

en 03-grabador falta el espacio para las dos pantallas de cada cámara para monitorear en vivo lo que se está filmando. Agregale eso y lo mando a MK para que lo implemente.

Puede ser mañana.

abrazo

Leandro Braier Producción Audiovisual & Social Media Benteveo Agencia Productora http://benteveo.tv Móvil 1158717399

2016-01-06 19:35 GMT-03:00 Braulio Evangelisti notifications@github.com:

Lea arme una carpeta a btv porque no tengo ningun dato de algun hosting de Paty, me apure lo mas que pude para terminar todas las pantallas que faltaban hoy, seguramente va a faltar pulir esto, espero tu feedback.

http://www.benteveo.tv/_patystand/01-usuario-nuevo.html http://www.benteveo.tv/_patystand/02-usuario-confirmado.html http://www.benteveo.tv/_patystand/03-grabador.html http://www.benteveo.tv/_patystand/turno.html http://www.benteveo.tv/_patystand/05-video-guardando.html http://www.benteveo.tv/_patystand/06-video-guardado.html http://www.benteveo.tv/_patystand/07-participantes-lista.html

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/PatyChile/issues/1#issuecomment-169484323 .

[mkreyness]

Ojo, esto hay que integrarlo con la lista, como ya dije en otro thread, ya que mientras esta la lista TAMBIEN se tiene que ver el numero seleccionado.

No sirve un boton "Pausar", quedamos que no existe eso con algo en vivo. Los botones tienen que ser REC / STOP, y para mi hasta podria ser un solo boton que cambia. Otro problema: co el Chrome la PC NO LOGRO abrir una ventana de browser tan grande. Es urgente que Valentin pruebe que realmente en el Ubunto con el Firefox eso funcione.

[LeandroBraier]

Ok.

Brau, fijate. Tendrías que hacer una doble pantalla también para la lista, no solo para la grabación.

MK, vos lo ves con Valentín no?

Leandro Braier Producción Audiovisual & Social Media Benteveo Agencia Productora http://benteveo.tv Móvil 1158717399

2016-01-06 19:51 GMT-03:00 mkreyness notifications@github.com:

Ojo, esto hay que integrarlo con la lista, como ya dije en otro thread, ya que mientras esta la lista TAMBIEN se tiene que ver el numero seleccionado.

No sirve un boton "Pausar", quedamos que no existe eso con algo en vivo. Los botones tienen que ser REC / STOP, y para mi hasta podria ser un solo boton que cambia. Otro problema: co el Chrome la PC NO LOGRO abrir una ventana de browser tan grande. Es urgente que Valentin pruebe que realmente en el Ubunto con el Firefox eso funcione.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/PatyChile/issues/1#issuecomment-169487675 .

[mkreyness]

Mientras Valentin no tenga la maquina, no puede probar. Cuando tenga la maquina vemos, yo me voy a conectar tambien. Me preocupa que sigan hablando como que la lista es una ventana separada de la de grabacion. Es todo en la misma, pero se tiene que ocultar/mostrar. Si no se van a ver unas transiciones horribles en el televisor. Vean por favor todo lo que puse en el otro thread de cuando mando parte de estas cosas Fede, no se si lo esta haciendo Braulio o Fede, me marean...

[LeandroBraier]

Lo están haciendo juntos @mkreyness , los dos leen este thread. Copio aquí lo que enviaste por mail por las dudas. Es el feedback que dio MK a la primer entrega de @FAAREIA

Falta tambien la pagina de landing en la cual mostrariamos el video, y tendria el boton para subir a facebook. Eso es central para que yo pueda empezar a trabajar en el sitio.

Pantalla 07: Fede: Esto deberia ser un DIV dentro de la pagina de DOBLE ANCHO.

Yo lo veo asi:

[DIV TV] [DIV OPERADOR]

en [DIV TV] solo se van a cambiar unos datos cuando se elija un renglon de la lista.

en [DIV OPERADOR] hay DOS sub DIVs:

• uno que tiene la lista que hiciste aca [DIV LISTA]
• otro que tiene el control de grabacion/monitoreo. [DIV GRABACION]

Esta lista deberia tener 3 botones por cada renglon:

• LLAMAR
• ELIMINAR
• GRABAR

Yo ademas agregaria al lado del de LLAMAR un numerito que va a ser la cantidad de veces que lo llamamos. A criterio del operador, despues de una cierta cantidad de veces toca "ELIMINAR" y no lo ve nunca mas.

Cuando se hace click en Llamar, ese numero y nombre es el que se actualiza en el [DIV TV], y lo unico que cambia en el [DIV LISTA] es el numerito de vez que se lo llama. Una vez que la persona llamada se presenta, ahi si hace click en "Grabar" del mismo renglon (no se puede en uno que nunca fue llamado), y [DIV LISTA] se OCULTA y se muestra [DIV GRABACION]. Ni bien se termina con la grabacion (o se desestima) se oculta [DIV GRABACION] y vuelve [DIV LISTA], donde este participante ya no figura. Yo me ocupo de todo eso por javascript, pero vos preve todos estos divs en la misma pagina doble ancho, Fede.

Hablé con Eze el tema de la máquina y me dice que mañana la está recibiendo Valentín.

abrazo

[mkreyness]

Otra cosa: los campos de nombre/apellido/email en el div de grabacion no tienen para que ser editables (en el 03-,...html son ediables), son solo un dato que se le muestra al operador, tomado de la lista seleccionada. Todo eso se puede achicar en un unico renglon en favor de poder mostrar los dos videos que van ahi, uno al lado del otro supongo.

[LeandroBraier]

MK, recibió Valentin la máquina ya? Avisenme.

Leandro Braier Producción Audiovisual & Social Media Benteveo Agencia Productora http://benteveo.tv Móvil 1158717399

2016-01-07 16:02 GMT-03:00 mkreyness notifications@github.com:

Otra cosa: los campos de nombre/apellido/email en el div de grabacion no tienen para que ser editables (en el 03-,...html son ediables), son solo un dato que se le muestra al operador, tomado de la lista seleccionada. Todo eso se puede achicar en un unico renglon en favor de poder mostrar los dos videos que van ahi, uno al lado del otro supongo.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/PatyChile/issues/1#issuecomment-169774707 .

[mkreyness]

Ni idea. Eso de "Hablé con Eze el tema de la máquina y me dice que mañana la está recibiendo Valentín." lo pusiste vos, no yo. Le mando mail a Valentin, pero lo mismo podes hacer vos. Me parece que seria util directamente incluirlo en este github asi no tenemos que andar repitiendo cosas.

[LeandroBraier]

Dale ahi le pregunto su usuario y lo incluyo.

Leandro Braier Producción Audiovisual & Social Media Benteveo Agencia Productora http://benteveo.tv Móvil 1158717399

2016-01-07 16:14 GMT-03:00 mkreyness notifications@github.com:

Ni idea. Eso de "Hablé con Eze el tema de la máquina y me dice que mañana la está recibiendo Valentín." lo pusiste vos, no yo. Le mando mail a Valentin, pero lo mismo podes hacer vos. Me parece que seria util directamente incluirlo en este github asi no tenemos que andar repitiendo cosas.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/PatyChile/issues/1#issuecomment-169777803 .

[braulio-evangelisti]

Actualizacion Lea

http://www.benteveo.tv/_patystand/03-grabador.html http://www.benteveo.tv/_patystand/07-participantes-lista.html http://www.benteveo.tv/_patystand/landing-video.html

[mkreyness]

Estoy pensando en voz alta: en la pantalla 03-grabador, el stop podria ser porque salio mal o porque termino bien. En un caso hay que dejarlo ahi para que vuelva a hacer rec si corresponde, y en el otro tiene que volver a la lista. Yo en vez de esos "<" y ">" de abajo pondria un boton de "volver a la lista" directamente, y ahi que elija al siguiente (que seria siempre el primero). No daria tantos elementos diferentes de control porque es mas laburo de programacion y mas cosas que pueden fallar.

[mkreyness]

Algo mas de feedback: los botones de camara 1, camara 2, ambas camaras, tendrian que tener un estado de "apretado" bien diferente del de "no apretado". No se si ahora lo tiene, pero cuando suelto el mouse vuelve a como estaba inicialmente en vez de quedar.

[LeandroBraier]

Ok @mkreyness Yo se lo pedí por las dudas que justo no esté un participante y haya que pasar al que sigue directamente. Puede funcionar sin eso, tal cual.

Más allá de esto no olvidar que a la izquierda siempre se debe mostrar el turno que se está a punto de grabar, sea porque la lista lo dice o sea porque el coordinador selecciono a otro participante de la lista.

Sumo a @valentinsabbath en la discusión, que ya recibió la PC y está preparandola.

[mkreyness]

La coordinacion entre ambas mitades la manejo yo una vez que meta codigo en la pagina. Por favor recuerden que la lista es parte de la MISMA pantalla, solo se oculta cuando se hace click en un boton de "Grabar" de algun renglon, y por eso digo que tendria que haber un boton de "volver a la lista" que oculte la parte de grabacion y la "desoculte". Todo esto tendria que estar resuelto lo antes posible porque si no no puedo avanzar mucho mas ya.

[ghost]

por ahora estoy en pleno proceso de instalacion pero quedense tranquilos que la ventana gigante anda en Ubuntu, ya lo probè en el live USB. El paquete de compizconfig-settings-manager es el que use para hacer las ventanas gigantes. Cualquier ventana se puede hacer gigante con eso. En cuanto al browser se puede usar el firefox? En chrome no anda el plugin de VLC

[mkreyness]

Si, hasta donde yo se, no tendria por que haber problema en usar Firefox. Lo raro es que no ande el plugin, en PC anda bien creo en Chrome.

[ghost]

les mande un mail con las fotos de como salio

[LeandroBraier]

@FAAREIA y @braulio-evangelisti , nuestro programador junior @valentinsabbath estuvo probando los html en las pantallas reales. Para que se visualice mejor a los dos monitores les tuvo que poner la resolucion de 1600x900. Aun asi no encaja perfecto.

PREGUNTA: No se puede maquetear teniendo en cuenta este dibujo en el cual DVI-0 es el monitor grande que tiene 1920x1080 y el monitor chico tiene 1600 x 900?

Subo capturas:

abrazo

[braulio-evangelisti]

Es complicado si las resoluciones no son iguales.

Ahi acomode un poco, habria que vaciar el cache del navegador y probar de nuevo

http://www.benteveo.tv/_patystand/03-grabador.html

[LeandroBraier]

Gracias @braulio-evangelisti Acá lo estamos viendo con @valentinsabbath en la produ.

En principio lo ve bien pero ahora que tiene todos los equipos lo va a probar. Va a ver si con el plugin HTML5 de video funciona bien o necesitan cambiarlo al plugin de VLC con el que venían probando. Pero eso de ultima lo cambian uds MK y Valentin en programación.

Por favor después de esto confirmen si necesitan algun cambio más en maquetación pero yo lo veo bien hasta acá.

Consulta para @mkreyness : las dos pantallas en que se divide la página de "03-grabador" ya saben cuales son, no? No eran dos pantallas iguales Full HD? Porque no las dejamos ya diseñadas en función de esas dos pantallas?

COnfirmanos eso por favor.

abrazo

[mkreyness]

No, yo lo que dije es que necesito que sea una sola PAGINA HTML con 3 partes: la que tiene el numero, y la que tiene el operador, que tiene dos partes: una lista y un control de grabacion. Cuando esta la lista, no se ve el control de grabacion, cuando se ve el control de grabacion, no se ve la lista, pero es FISICAMENTE todo la misma pagina HTML, y la misma que muestra el numero. El problema es que el monitor que tiene o le dieron a Valentin no es 1920 x 1080 sino 1600 x 900 o algo asi, con lo cual las mitades izquierda y derecha deberian tener distinto tamaño.

[LeandroBraier]

Ok MK.

@braulio-evangelisti ustedes los pueden ajustar a esto hoy?

Sería importante así ya podemos seguir con todas las pruebas.

[braulio-evangelisti]

@mkreyness que aparece primero cuando carga la pantalla, la lista y de ahi llama al div control?

[mkreyness]

Lo que aparece normalmente es la lista, y si hay alguien para clickear el botoncito de Grabacion (mucho tiempo podria no haber nadie, lo mismo antes de llamar al numero 1, no hay ningun dato para poner ahi), recien ahi se oculta la lista y aparece el control de grabacion.

[braulio-evangelisti]

Fijate ahora, aparece la lista de entrada, y llama al div de control con los iconos de Grabar dentro de las acciones

[mkreyness]

Genial, si podes sacarle esa animacion que hace al subir total con el operador, mejor. No necesitamos hacer pinta dentro de la cabina. Otra cosa si podes ir haciendo asi ganamos tiempo: al hacer click en los botones de las camaras yo ocultaria/mostraria los videos de las camaras. Tienen que funcionar asi: click en "1+2": tiene que prenderse y apagar "1" y apagar "2". Click en "1": tiene que prender "1" y apagar el resto. Click en "2" tiene que prender "2" y apagar el resto. Nunca estan los 3 apagados, y por lo tanto siempre hay una o ambos videos visibles.

[braulio-evangelisti]

Ahi acomode lo del slide, tendria que cambiar al toque ahora.

Vuelvo en 2hs y miro lo de los botones de las camaras

[LeandroBraier]

Gracias @braulio-evangelisti !

[braulio-evangelisti]

Listo lo de las cámaras 1 y 2, nose si es así lo del primer botón que muestra las dos es lo que entendí revisalo y avisame cualquier cambio

[mkreyness]

eso esta bien, lo unico que no deberian nunca "apagarse" los botones por tocarlos. O sea, siempre uno de los tres tiene que estar apretado, y hacer click en uno apretado NO deberia cambiarlo de estado. Es como una botonera de calefon, si vos tocas el boton apretado, sigue apretado, para soltarlo tenes que apretar alguno de los otros.

[braulio-evangelisti]

jeje no había probado clickear uno activo, ahi tendria que andar

[mkreyness]

perfecto, gracias.

[braulio-evangelisti]

Ahi remarque el boton de volver a la lista en la pantalla 03, solamente actualice el archivo de estilos css

[mkreyness]

Ok, la copio a la version que esta en uso en la PC real y vemos. Gracias.

[LeandroBraier]

@mkreyness te paso acá los cambios que hablamos en la reunión de recién para estas pantallas.

Pantalla de llamada de número y llista:

. Poner el nombre más grande, para que se vea bien de lejos, y más abajo el número para que quede más centrado todo dentro de la pantalla y en tamaño de fuente más similar.

[LeandroBraier]

@FAAREIA o @braulio-evangelisti tenemos un pedido urgente. Si pudiera ser para hoy genial.

El login donde la promotora inscribe al usuario necesita espacio para el teclado touch debajo. Tendrían que llevar el título y el formulario para arriba para dejar el espacio abajo para el teclado. Llegamos para hoy o mañana a primera hora al menos?

[FAAREIA]

http://www.benteveo.tv/_patystand/01-usuario-nuevo.html Si esta el HTML esta en el servidor de paty chile, pasenme la ruta en donde está asi lo modifico. Si necesitan más espacio avisen! Abrazo

[LeandroBraier]

Gracias Fede! Está perfecto!

@mkreyness podés descargarte la versión corregida de aquí.

[mkreyness]

Listo !

[LeandroBraier]

Gracias a los dos!!! Cierro este ticket así queda más liviano para el viaje a Chile.

abrazo

[mkreyness]

En realidad habia otras cosas pendientes, lo del tamaño y posicion del llamado de turno. Ya lo baje y agrande el font del nombre, pero la verdad que como no lo estoy viendo en el contexto real no se si queda centrado como deberia.

[LeandroBraier]

Si me pasás el html te confirmo.

[mkreyness]

ya no tengo acceso.. Se fue pa'Chile.

[LeandroBraier]

Ok, no problem. Cualquier cosa lo cambiamos en alguna de las pruebas con el 4G que contraten.

Leandro Braier Producción Audiovisual & Social Media Benteveo Agencia Productora http://benteveo.tv Móvil 1158717399

On Wed, Jan 13, 2016 at 9:44 AM, mkreyness notifications@github.com wrote:

ya no tengo acceso.. Se fue pa'Chile.

— Reply to this email directly or view it on GitHub https://github.com/LeandroBraier/PatyChile/issues/1#issuecomment-171280401 .