Cear página HOME (pensar contenidos)

[cyberpunx]

Vayamos poniendo ideas para el template de Home.

Acá dejo el Mockup

https://xd.adobe.com/view/86fcdf79-32d5-4b12-5ef4-e4a643434247-f0cd/?fullscreen&hints=off

[cyberpunx]

Me gusta MUCHO del mockup la foto vertical del usuario con el nombre bien grande a un lado.

Tiro ideas de secciones/links para el home: (Asumiendo que es un User loggeado)

• Sección Eventos (que muestre los que pasaron hace poquito y los que se vienen a corto plazo)
• Calendario, alternativa a Eventos.. directamente ver el calendario del mes.
• Links utiles: HTML de los Mods, direcciones IP del TS, algún pdf, etc
• Sección de tu unidad con datos de tu unidad
• Sección NOTICIAS (es fácil crear un formulario para crear posts de texto y que haya noticias en nuestro home)
• (Algún día tendremos telegram con intración al Oficial y la justificación de la asistencia)
• Me gusta la idea de destacar el perfil de un Miembro al azar en el home, o quizá elegido de un pool de gente con buena asistencia.

[corp-0]

Creo que de lo que dijiste, lo único que no está en el mockup es la sección con links útiles (lo que me parece buenísima idea).

Uhmm, me parece que podríamos hacer que el cuadro de próxima misión sea dinámico, como carousel y vaya de próxima misión a miembro destacado a noticias. Así aprovechamos bien ese espacio y lo convertimos en info en movimiento, dejando los otros enlaces más necesarios estáticos.

Luego hago otro mockup a ver cómo quedaría con un layour que incluye lo que propones.

[corp-0]

Sección de tu unidad con datos de tu unidad

Qué datos?

[cyberpunx]

Ups, sin querer cerré el issue y lo volví a abrir.

Me parece buenísima la idea del carousel, vamos con esa!

Qué datos?

Lo de la unidad me imagino como minimo el logo de la unidad y un link a la pagina de la unidad (La pagina de la unidad es charla para otro issue xD). Si vemos que queda espacio para más info, podría ser una lista de miembros de la unidad, o quizá algunos datos tipo Cantidad de Miembros, % Promedio de Asistencia (combinada de toda la unidad)

Como idea loca estoy pensando que el home tenga su estilo según tu unidad (por ejemplo una imagen de fondo) Si sos FA que aparezca un "wallpaper" de aviones, helicopteros, etc Para Inf. que aparezcan desembarcos, etc O quizá algún pequeño detalle (el parche de la unidad arriba a la derecha junto a tu perfil)

[cyberpunx]

Carrousel:

• Mini calendario (veremos si la habilidad con JS me da para hacerlo navegable, pero sino que muestre el mes actual)
• Sección Noticias / Anuncios
• Sección Campaña actual (que tenga info y fotos de la campaña en transcurso)
• algo más?

Lo bueno del carrousel es que nos libera mucho espacio y como dijiste vos, además ganamos dinamismo y movilidad en la pagina. Además de que visualmente se despeja mucho, porque ya no queda todo saturado de info repartida. Para mi deberíamos tener como los 2 elementos más importantes el carrousel en medio bien grande, el soldado a un lado bastante grande también. Y lo que sobre , bastante apartado o pequeño para que no moleste visualmente. (¿opiniones?)

[corp-0]

quieres calendario con fechas como calendario normal una lista de eventos como está en el mockup?

[cyberpunx]

quieres calendario con fechas como calendario normal una lista de eventos como está en el mockup?

yo haría un calendario similar al que existe, pero más compacto. Lo bueno de un calendario en lugar de una lista, es que el calendario presenta los eventos más ordenados y es mucho más visual, con una sola mirada ya sabes lo que se viene y lo que ya pasó.

[fmothe]

holis, con el calendario no tendrias que hacer un update en el caso de que no se haya jugado la mision por X problema? ya sea de servidor o no ?

[cyberpunx]

holis, con el calendario no tendrias que hacer un update en el caso de que no se haya jugado la mision por X problema? ya sea de servidor o no ?

El calendario se updatea automáticamente según las misiones en la base de datos. Las misiones se dan por jugadas (Finalizadas) una vez que se sube el reporte generado en el server. Si hubo algún X problema y no se jugó, no se le sube el reporte a esa misión y ésta no adquiere el estado de "Finalizada".

Esto solo tiene sentido cuando la misión fue generada de antemano (programada en el calendario con X tiempo de anticipación).

Si la misión no se generó de antemano y de golpe se juega y se sube el reporte. La misión pasa a figurar como Finalizada (el día lo saca del reporte) y empieza a aparecer en el calendario el dia que corresponda. (Siempre en el pasado ya que no puedo subir un reporte de algo que aún no jugué)

Es cierto que si por algún motivo una misión no se juega (supongamos que se cancela la campaña y se hace un entrenamiento) tiene que venir alguien manualmente y patear la fecha de la campaña a la semana que viene (si ya estaba programada para jugarse).

El sistema es automático para algunas cosas, pero para algunas otras requiere de alguien supervisando

[fmothe]

Si, igualmente lo decia mas a forma de ver como se esta haciendo esto, ahora que tengo un poco más de tiempo en el laburo voy a estar metiendome más para desarrollar las apps, ya que tambien necesito actualizarme con las tecnologías

[corp-0]

@fmothe buenísimo, tenía ganas que entraras acá con tus conocimientos de js. Leéte este issue #15 para quedar al día en todo. Cualquier cosa, lo discutimos por privado.

[fmothe]

Ahi estuve viendo el kanban y la idea del proyecto, si queres cuando podamos nos juntamos en ts y me explicas como montar la aplicacion localmente para testeo, más que nada la parte de python que si bien entiendo nunca monte una aplicacion de este estilo. Hoy en el tiempo libre del laburo estuve haciendo el front de un log-in y empeze a maquetar algo en Angular que es algo que a la par estoy aprendiendo tambien

[cyberpunx]

Buenísimo Mothe, acá estamos para ayudarte a entender como va todo.

Si querés encarar Python y Django te recomendaría lo siguiente: Si no cazás mucho de python la mejor manera es arrancar a programar boludeces por tu cuenta siguiendo tutoriales e intentando resolver problemas sencillos, más que nada para agarrarle la mano a la sintáxis y después como siempre Google es tu mejor amigo.

Con Django lo mismo, la mejor forma de aprender es agarrar un tutorial de youtube y seguir paso a paso la creación de una app sencilla con un par de formularios.

A lo mejor yo arrancaría primero con Python y después de que tengas una mínima base meterte en Django. Porque a lo mejor si empezás con los dos a la vez te va a crear más confusión que otra cosa.

Por otro lado, si querés ayudar con lo que ya tenés más sólido. (Tengo entendido que JS y Angular) Tendríamos ver con cuidado como integrar Angular para el front end de Django, es posible, pero requiere cierto criterio. Por el momento nuestro front end está hecho en puro HTML usando Bootstrap y algunas librerías js básicas (como jquery).. y algunas más especificas para ciertas páginas (datatables para las tablas, datepicker para los campos de fecha, select2 para algunos formularios, fullcalendar para el calendario, etc)

[fmothe]

Si, igualmente por ahora si queres puedo empezar a hacer el front en html y angular, y vamos viendo como queda, y no le pongo ninguna función. Por lo que estuve leyendo un poco se puede usar django con py de backend usando sus api rest y usar angular de front end. Por otro lado, angular masomenos lo estoy aprendiendo, recien ahora puedo liberarme del laburo que es backend java 1.4 imaginate lo desactualizado que estoy. Igual hoy cuando Riquelme me ayude a levantar local voy a poder ver mas que se va a poder meter en el front.

[fmothe]

Les dejo un concept que estuve haciendo hasta hace un ratito antes de salir al laburo, le falta pulirlo, pero mi idea era meter un login, y que cada persona tenga un usuario, se me ocurre tambien que haya una parte en el perfil en que la persona pueda poner que no va a asistir si ya sabe por anticipado que ese dia no va a poder participar.

Edit: Esto lo hice con html y bootstrap, hasta poder ver si podemos meter angular con materials o nos quedamos con lo que está. las imagenes actualmente estoy sacando la ref directamente de la pagina de zr, pero podria editar algo en illustrator o photoshop y lo hacemos mas personalizado.

[cyberpunx]

El login ya está armado y funcionando. Lo de avisar la falta tiene su propia tarjeta en el kanban. Nos fuimos por las ramas en verdad porque este issue es para discutir los contenidos de Home.

Si querés tirar ideas, usá el tablero Kanban, la columna de más a la izquierda. Pero fijate si esta idea no está ya implementada xD

[corp-0]

@fmothe está bonito el concepto, en todo caso. Y si, tenemos que refactorear todo el front end para que siga una paleta de colores y estilo similar a la página web principal del clan, así que no está demás tener visualización de cómo sería eso.

También es cierto que este issue es para hablar de la página home, si hay para discutir se puede armar otro issue, así mantenemos la discusión ordenada y luego sabemos de dónde sacar las sugerencias cuando se esté trabajando en la característica.

[fmothe]

Ahi estuve toqueteando un poco la paleta de colores de lo que seria home y que se trasladaria a las demas vistas. Mi idea es dejar el css ya definido. https://xd.adobe.com/view/2f01f1be-635c-4bcf-5925-0410350671de-5930/

Fijense si lo pueden ver, sino me avisan y se los mando. Las Fonts de los titulos son Orbitron, si por ahi no se lee muy bien o quieren ver como queda otra tipografía fijense si pueden usarla de google fonts que estamos seguros que esas tipografias tienen todos los lenguajes supporteados y no nos va a faltar ningun simbolo especial. Intenté ponerle de fondo una imagen difuminada pero no quedaba tan bien, o por lo menos con la foto que probé. Habria que ver si consiguiendo editar una imagen buena y sencilla queda bien. Me gustaría saber que colores quieren para el chat, o asi azul como está, esta bien. Mas que nada porque desentona un poco con los colores de zr.

[corp-0]

Sí, hay que reducir la cantidad de colores. Quizás usar una herramienta que genere paletas y no tener más de 4 para todo. Crees que podrías hacer los cambios que discutimos acá en el mockup?

[fmothe]

Ahi deje el link del mockup actualizado a la paleta de colores que se me ocurrio. Puede llegar a haber un par de manqueadas, pero la idea está, se me ocurrio que para ciertas cosas como por ejemplo, cuerpos repatriados o asistencias totales en una mision ponerle un color que resalte, sino se hace muy monotona.

[corp-0]

@fmothe y el link?

[corp-0]

@fmothe Creo que esa es la paleta a la que tenemos que apuntar. Tratemos de trabajar con el diseño que probó @cyberpunx , que a mi juicio queda MUY bien. Adjunto capturas y están disponible en el live server igual.

[cyberpunx]

aviso que esos cambios están hechos muy atados con alambre. @fmothe si te das maña con el css se podría hacer muchisimo más correcto (sobretodo la barra superior). Por ahora lo subí así nomás como una prueba de concepto.

[fmothe]

Pushealos a la devbranch asi me piso mi local ahora que toque muy poco del css y arrancamos con eso, lo que si tenemos que decidir ya si vamos a poner la api de ts o de telegram o lo que sea para poder verlo en la pagina, para saber si reservamos ese espacio

[cyberpunx]

En principio no a lo del TS.. ya que no estaría siendo prioridad.

A futuro si lo implementamos le buscamos un hueco, total con el sistema grid de bootstrap se puede pilotear mandarle una columna con un panel más.

Ahora en un toque pusheo los cambios

[corp-0]

Tener los anuncios del chat oficial es una idea loca que requiere, primero que todo, que migren comunicaciones de whatsapp a telegram. La verdad es que la integración no me suena muy compleja, más difícil es mover a la gente de plataforma.

[fmothe]

Muchachos, adjunto imagen de como me está quedando. Todavia estoy viendo si queda mejor fondo rojo, letras negras o viceversa. En los apartados de perfil destacado y mi unidad, en Perfil destacado se podria usar, asistencias, años en zr, etc. en En el de unidad me parece que en lugar de carousel yo pondria un menu de acceso rapido con los filtros pre aplicados en un dropdown en el header y abajo pondria un carousel de asistencias de la unidad y no se lo que se defina despues. O en su defecto se podria poner un menu de acceso rapido por unidad en el apartado que tenemos a definir

Por otra parte no estoy pudiendo cambiar el color de la barra de navegacion superior. intente modificar el theme-custom, y agregarlo dentro del blockhead extra y nada, ahora voy a probar si modificando el theme.css modifica algo. Pero si alguno tiene alguna idea de que puede ser me avisa ?

[corp-0]

Cómo se ve invertido? Rojo sobre negro.

[fmothe]

ahora que lo veo, no se ve tan mal, me gustan los dos, cuestion de decidir, igual habria que tener en cuenta que dependiendo la rotacion de fondo que pongamos, si ponemos un fondo que sea de noche la transparencia del negro se puede llegar a perder

[corp-0]

con Strix concluímos que las cabeceras de los paneles se ven mejor en sólido. El cuerpo del panel transparente está bien.

[fmothe]

@corp-0 Ahi estuve haciendo una de las rivetas para los rangos de los elementos, cosa de en lugar de poner Cbo1. Riquelme se ponga esta imagen, illustrator me deja guardarlo como .svg para hacerlo glyphicon ademas

[corp-0]

hazte una para probar cómo queda y si gusta, las hacemos todas. En todo caso y si mal no recuerdo, creo que los rangos están hechos para el teamspeak. Podríamos pedirlos nomás.

EDIT: era TeamSpeak, no discord

[cyberpunx]

Al final el fondo de los paneles con blur y dejamos las cabeceras sólidas y en blanco (el rojo es muy fuerte y chillón).

Puse el calendar en el carousel, por el momento es funcional. Habría que retocar el estilo un poco a lo mejor.. y cuando hay muchos eventos tira overflow y aparece un scroll, eso es medio choto. También habría que hacer que todos los del carousel tomen el mismo alto, creo que es medio feo que se vaya achicando y agrandando el contenido al cambiar de slide. Ah, los indicadores para saber en que estás, los puse con una barra roja abajo en lugar de los circulos blancos. De modo que ocupa menos espacio y le podemos dar un uso al rojo.

[cyberpunx]

@corp-0 Ahi estuve haciendo una de las rivetas para los rangos de los elementos, cosa de en lugar de poner Cbo1. Riquelme se ponga esta imagen, illustrator me deja guardarlo como .svg para hacerlo glyphicon ademas

wachin tratemos de mantener on-topic este issue!