Diferencia entre revisiones de «Cronovisor: Wireframes»
(Página creada con « ← Volver a Cronovisor») |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
[[Cronovisor | ← Volver a Cronovisor]] | [[Cronovisor | ← Volver a Cronovisor]] | ||
==Wireframes I== | |||
En esta primera propuesta de wireframes la plataforma trabaja en primera instancia, en el campo de la indagación de información, en el cual presenta una manera de navegar buscando fechas y lugar para dar con datos, y en sugunda instancia la visualización de estos datos en una presentación en la cual se crean capas editables de estos. | |||
<gallery widths="250px" heights="250px" perrow="2"> | |||
image:CF_Desktop-1.2.png|'''home''':La plataforma contiene un video introductorio de lo que trata el proyecto y sus beneficios, mencionados anteriormente. En esta sección se pueden observar los distintas presentaciones creadas por otros estudiantes y profesores. | |||
image:CF_Desktop-2.2.png|'''inicio''': consta de una breve sección la cual pide el ingreso de usuario y contraseña, avisa de los beneficios y novedades. | |||
image:CF_Desktop-3.2.png|'''registro''':La plataforma permite el ingreso de dos distintas maneras, una con la introducción de la información requerida (nombre, apellidos, correo y creación de contraseña) o bien el registro iniciando con la cuenta de Facebook para facilitar el ingreso. | |||
image:CF_Desktop-4.2.png|'''presentaciones''':En esta sección el usuario maneja y dispone de todas sus presentaciones, en las cuales puede administrarlas, seleccionando cuáles son privadas, y cuáles públicas, como también las presentaciones generadas en colaboración. Permitiendo aquí la creación de sus presentaciones. | |||
image:CF_Desktop-5.2.png|'''creación'''En la creación de presentaciones el usuario puede navegar a través de distintas secciones de tiempo: Milenios, siglos, décadas y años, de los cuales los eventos aparecerán en las distintas secciones de los continentes. Aquí los usuarios pueden leer el devenir de distintos eventos en simultáneo con lo que sucede en los otros continentes, así puede seleccionar los eventos que luego se presentarán como línea de tiempo. | |||
image:CF_Desktop-6.2.png|'''creación''':Los eventos seleccionados se convierten en capas, las cuales son posibles de editar con mayor información por el usuario, el cual puede editar los estilos de texto. Puede crear trazados que unan estos eventos, como dibujar las secciones del mapa que le interesa resaltar. Finalmente puede editar la transición de eventos con estilos de animación. | |||
image:CF_Desktop-7.2.png|'''visualización''':Finalmente el usuario puede visualizar su presentación en una pantalla que muestra los eventos en un mapa goblal como el avance de estos en una linea de tiempo en la parte inferior. | |||
</gallery> | |||
Esta propuesta no es satisfactoria pues carece de un sentido claro en la búsqueda de indagación o en la visualización de este, lo que complejiza su realización. Por ello es debido elegir que el usuario deba realizar una sola actividad. | |||
==wireframes II== | |||
Esta segunda propuesta en la cual nos seguimos el modelo de diseñado anteriormente se centra en las pantallas que el usuario verá para construir estas visualizaciones de '''hechos''' y '''lugar'''. El usuario puede crear primero los ''hechos'', que se guardarán en la galería personal, para luego crear la presentación (''cronovisión''). Lo que el usuario debe realizar es simplemente llenar los datos requeridos, seleccionar la tipología correspondientes y luego seleccionar e ilustrar la ubicación de estos hechos en un mapa para dar origen a esta visualización. | |||
<gallery widths="250px" heights="250px" perrow="2"> | |||
image:CF_desktop-1.png|'''home''': mejora en la presentación y cambio más visual en la galería de inicio, cambio en el menú de navegación. | |||
image:CF_desktop-2.png|'''registro/acceso''': los datos requeridos son mayores, hay más opciones de inicio y se presenta aquí mismo la tabla de acceso. | |||
image:CF_desktop-3.png|'''sobre el sitio''': sección que describe de qué trata esta plataforma, cómo funciona y cuáles son sus virtudes. Presentación simple. | |||
image:CF_desktop-4.png|'''perfil''': el usuario editar su perfil a demás de ver un registro de sus resultados, notas por presentación, y sus colección de presentaciones favoritas. | |||
image:CF_desktop-4-2.png|'''galería''': en esta sección puede buscar sus hechos y presentaciones a través del buscador según las tipologías que guste. Aquí puede seleccionar y editarlas. | |||
image:CF_desktop-4-3.png|'''crear hecho''': para esto sólo debe ingresar los contenidos necesarios y requeridos en esta ventana. | |||
image:CF_desktop-4-4.png|'''crear presentación''': en esta sección el usuario ingresa los datos básicos de la presentación, como nombre, imagen, descripción, etc. | |||
image:CF_desktop-4-5.png|'''añadir hechos''': gracias al buscador el usuario solo debe seleccionar los hechos que estime conveniente. | |||
image:CF_desktop-4-6.png|'''añadir ubicación''':en esta sección el usuario debe ingresar la ubicación de todos los hechos seleccionados anteriormente, para ello selecciona un punto en el mapa y le da clasificación, luego dibuja el área según corresponda. | |||
image:CF_desktop-4-7.png|'''presentación''': se visualiza un mapa en el cual aparecen los puntos en que los hechos ocurrieron, bajo de este se genera una linea de tiempo ubicándolos. Aquí se pueden seleccionar los tipos de hechos que acontecieron en el período de tiempo generado. | |||
image:CF_desktop-6.png|'''tutorial''': sección que enseña el paso a paso de como crear un hecho, una presentación, una actividad en grupo, cómo evaluar una presentación, etc. | |||
image:CF_desktop-7.png|'''noticias''': sección que informa de todas las actualizaciones, mejoras y nuevas opciones que presentara la plataforma, así como noticias acerca de su desarrollo. | |||
</gallery> | |||
==Wireframe III== | |||
Para esta nueva versión se avanzó en la búsqueda y presentación de la información, la cual se visualiza geográficamente para que el usuario visualice el hecho en el lugar en que sucedió. | |||
<gallery widths="250px" heights="250px" perrow="2"> | |||
image:CF_desktop-4-7.fw.png|'''inicio''':la página de inicio funciona como buscador, en base a los datos de wikipedia, aparecen los resultados de la búsqueda ubicados geográficamente y temporalmente por la linea de tiempo que está en la parte inferior. Aquí el usuario puede seleccionar los hechos que piensa utilizar y relacionar. | |||
image:CF_desktop-4-2.fw.png|'''hechos''':una vez que el usuario a agregado los hechos que quiere relacionar este los puede encontrar en su perfil en la sección "mis hechos". Aquí el usuario puede organizar los hechos en el orden en que quiere presentarlos. | |||
image:CF_desktop-4-8.fw.png|'''crear''': aquí el usuario previsualiza su presentación y puede agregar nuevas secciones para redactar su pensamiento de porqué relaciona un hecho con el siguiente. | |||
image:CF_desktop-4-9.fw.png|'''presentación''':aquí la presentación está bajo el control del usuario, se ve el avance y la ubicación de los hechos en la presentación la cual puede profundizar visualizando la galería de imágenes y los textos que se desplieguen. | |||
</gallery> | |||
==Mapa de navegación II== | |||
[[image:Mapa_de_navegación-03.png|center|thumb|700px]] | |||
La manera en que la plataforma se desarrolla es registrándose ya sea a partir de los botones de ''"inicio"'', ''"registro"'' o ''"crear"'', la cual pide registrarse o iniciar sesión para comenzar. | |||
*'''Cronovisor''':Relata las características de la plataforma: Exploración, Organización y Presentación | |||
*'''Perfil''':Aquí el usuario se registra o inicia sesión, administra sus datos, revisa notificaciones y ve los grupos a los que pertenece. | |||
*'''Explorador''':El usuario ingresa términos de búsqueda, navega por '''Tiempo''' y '''Lugar'''. | |||
*'''Temas''':Selector de hechos y personajes por temas: Arte, Ciencia, Política, Religión, Tecnología. | |||
*'''Clase''':selector de elementos para ver sólo hechos o sólo personajes. | |||
*'''Hechos''':Donde se guardan los hechos seleccionados, permite crear cronovisión. | |||
*'''Cronovisones''':Donde se guardan las cronovisiones recién crea- das, permite su edición. | |||
*'''Tutoriales''':Textos y videos que enseñan como navegar, guardar hehos/personajes y crear/editar cronovisiones. | |||
*'''Noticias''':Actualizaciones de la paltaforma, mejoras, etc. | |||
==Partituras de interacción== | |||
Secuencias de acción e interacción del usuario con el proyecto. Aquí se ilustran las distintas maneras en las que el usuario trabajaría, exploraría y crearía las presentaciones con el uso de esta plataforma digital. | |||
[[image:Partitura_cronovisor_1-01.png|thumb|'''inicio/registro''': Aquí se le pide al usario iniciar o registrarse utilizando una de sus cuentas de redes sociales como g+ o facebook, siendo estas en chile las más populares. Pidiendo autorización para que el sitio obtenga los datos requeridos para el perfil.|700px|center]] | |||
[[image:Partitura_cronovisor_1-02.png|thumb|'''registro''': Aquí se le piden los siguientes datos=Nombre, Apellido, email y contraseña.|700px|center]] | |||
[[image:Partitura_cronovisor_1-03.png|thumb|'''búsqueda''': Aquí el usuario hace uso de las opciones de búsqueda, ingresando un término de búsqueda, al aparecer los datos coincidentes, el usario tiene la opción de especificar la búsqueda por tema y tipo. También buscando los hechos a travez de la barra de tiempo. Al selecciona los hechos y personajes que requiera el sistema pide guardar los datos y dónde los quiere guardar.|700px|center]] | |||
[[image:Partitura_cronovisor_1-04.png|thumb|'''creación''': Para crrear una cronovisión el usuario debe ingresar a su galería de hechos para seleccionar los que utilizará, revisar los datos contenidos en esta, seleccionar si es una nueva o anterior cronovisión y darle nombre|700px|center]] | |||
[[image:Partitura_cronovisor_1-05.png|thumb|luego se abre la ventana de cronovisiones, ve la secuencia de hechos pudiendo reproducir, editar el contenido de los hechos para generar otros y agregar las relaciones entre un hecho y otro.|700px|center]] | |||
==Wireframe IV== | |||
'''Crear/Ingresar cuenta''' | |||
<gallery widths="250px" heights="250px" perrow="2"> | |||
image:CF_3_perfil.fw.png|'''crear/ingresar cuenta''': el usuario rellena los datos para acceder al perfil del sitio web. | |||
image:CF_4_perfil_error_1.fw.png|'''Aviso''':el sistema responde cuando los datos ingresados son erróneos. | |||
image:CF_6_perfil_alumno.fw.png|'''Acceso Alumno''':el usuario tipo alumno ingresa los datos.Va primero por ser el objetivo de la plataforma. | |||
image:CF_5_perfilerror_2.fw.png|'''Acceso Profesor''':Se debe determinar dato para que asegurar que se trata de un profesor. | |||
</gallery> | |||
'''Perfil Usuario''' | |||
<gallery widths="250px" heights="250px" perrow="2"> | |||
image:CF_editar_perfil_alumno_1.fw.png|'''Datos personales''':se rellena con los datos como curso, ubicación y foto de perfil. | |||
image:CF_editar_perfil_alumno_2.fw.png|'''Datos de acceso''':le permite al usuario configurar y cambiar su correo y contraseña de ingreso. | |||
image:CF_editar_perfil_alumno_3.fw.png|'''Eliminar cuenta''':en caso de ser necesario se le permite al usuario borrar su cuenta y sus datos. | |||
image:CF_perfil_alumno_1.fw.png|'''Grupos''':sección que muestra y permite acceder a los grupos de curso a las que el usuario pertenece. | |||
image:CF_perfil_alumno_2.fw.png|'''Notificaciones''':aquí recibe las invitaciones para unirse a un grupo, saber y contestar de actividades que se realicen en sus grupos o sus cronovisiones. | |||
</gallery> | |||
'''Sitio Web''' | |||
<gallery widths="250px" heights="250px" perrow="2"> | |||
image:CF_2_sobrecronovisor.fw.png|'''Sobre Cronovisor''':Información de qué es, porqué usarlo, cómo usarlo. | |||
image:CF_7_tutorial.fw.png|'''Tutoriales''':Videos informativos de las actividades que en la plataforma se realizan. | |||
image:CF_8_noticias.fw.png|'''Noticias''':Actualizaciones, noticias e información acerca del progreso del sitio. | |||
image:CF_1_home.fw.png|'''Home''':Primera pantalla de búsqueda, ingreso de datos por palabra, años, ubicación y tema. | |||
</gallery> | |||
Revisión del 10:36 26 oct 2015
Wireframes I
En esta primera propuesta de wireframes la plataforma trabaja en primera instancia, en el campo de la indagación de información, en el cual presenta una manera de navegar buscando fechas y lugar para dar con datos, y en sugunda instancia la visualización de estos datos en una presentación en la cual se crean capas editables de estos.
home:La plataforma contiene un video introductorio de lo que trata el proyecto y sus beneficios, mencionados anteriormente. En esta sección se pueden observar los distintas presentaciones creadas por otros estudiantes y profesores.
inicio: consta de una breve sección la cual pide el ingreso de usuario y contraseña, avisa de los beneficios y novedades.
registro:La plataforma permite el ingreso de dos distintas maneras, una con la introducción de la información requerida (nombre, apellidos, correo y creación de contraseña) o bien el registro iniciando con la cuenta de Facebook para facilitar el ingreso.
presentaciones:En esta sección el usuario maneja y dispone de todas sus presentaciones, en las cuales puede administrarlas, seleccionando cuáles son privadas, y cuáles públicas, como también las presentaciones generadas en colaboración. Permitiendo aquí la creación de sus presentaciones.
creaciónEn la creación de presentaciones el usuario puede navegar a través de distintas secciones de tiempo: Milenios, siglos, décadas y años, de los cuales los eventos aparecerán en las distintas secciones de los continentes. Aquí los usuarios pueden leer el devenir de distintos eventos en simultáneo con lo que sucede en los otros continentes, así puede seleccionar los eventos que luego se presentarán como línea de tiempo.
creación:Los eventos seleccionados se convierten en capas, las cuales son posibles de editar con mayor información por el usuario, el cual puede editar los estilos de texto. Puede crear trazados que unan estos eventos, como dibujar las secciones del mapa que le interesa resaltar. Finalmente puede editar la transición de eventos con estilos de animación.
visualización:Finalmente el usuario puede visualizar su presentación en una pantalla que muestra los eventos en un mapa goblal como el avance de estos en una linea de tiempo en la parte inferior.
Esta propuesta no es satisfactoria pues carece de un sentido claro en la búsqueda de indagación o en la visualización de este, lo que complejiza su realización. Por ello es debido elegir que el usuario deba realizar una sola actividad.
wireframes II
Esta segunda propuesta en la cual nos seguimos el modelo de diseñado anteriormente se centra en las pantallas que el usuario verá para construir estas visualizaciones de hechos y lugar. El usuario puede crear primero los hechos, que se guardarán en la galería personal, para luego crear la presentación (cronovisión). Lo que el usuario debe realizar es simplemente llenar los datos requeridos, seleccionar la tipología correspondientes y luego seleccionar e ilustrar la ubicación de estos hechos en un mapa para dar origen a esta visualización.
home: mejora en la presentación y cambio más visual en la galería de inicio, cambio en el menú de navegación.
registro/acceso: los datos requeridos son mayores, hay más opciones de inicio y se presenta aquí mismo la tabla de acceso.
sobre el sitio: sección que describe de qué trata esta plataforma, cómo funciona y cuáles son sus virtudes. Presentación simple.
perfil: el usuario editar su perfil a demás de ver un registro de sus resultados, notas por presentación, y sus colección de presentaciones favoritas.
galería: en esta sección puede buscar sus hechos y presentaciones a través del buscador según las tipologías que guste. Aquí puede seleccionar y editarlas.
crear hecho: para esto sólo debe ingresar los contenidos necesarios y requeridos en esta ventana.
crear presentación: en esta sección el usuario ingresa los datos básicos de la presentación, como nombre, imagen, descripción, etc.
añadir hechos: gracias al buscador el usuario solo debe seleccionar los hechos que estime conveniente.
añadir ubicación:en esta sección el usuario debe ingresar la ubicación de todos los hechos seleccionados anteriormente, para ello selecciona un punto en el mapa y le da clasificación, luego dibuja el área según corresponda.
presentación: se visualiza un mapa en el cual aparecen los puntos en que los hechos ocurrieron, bajo de este se genera una linea de tiempo ubicándolos. Aquí se pueden seleccionar los tipos de hechos que acontecieron en el período de tiempo generado.
tutorial: sección que enseña el paso a paso de como crear un hecho, una presentación, una actividad en grupo, cómo evaluar una presentación, etc.
noticias: sección que informa de todas las actualizaciones, mejoras y nuevas opciones que presentara la plataforma, así como noticias acerca de su desarrollo.
Wireframe III
Para esta nueva versión se avanzó en la búsqueda y presentación de la información, la cual se visualiza geográficamente para que el usuario visualice el hecho en el lugar en que sucedió.
inicio:la página de inicio funciona como buscador, en base a los datos de wikipedia, aparecen los resultados de la búsqueda ubicados geográficamente y temporalmente por la linea de tiempo que está en la parte inferior. Aquí el usuario puede seleccionar los hechos que piensa utilizar y relacionar.
hechos:una vez que el usuario a agregado los hechos que quiere relacionar este los puede encontrar en su perfil en la sección "mis hechos". Aquí el usuario puede organizar los hechos en el orden en que quiere presentarlos.
crear: aquí el usuario previsualiza su presentación y puede agregar nuevas secciones para redactar su pensamiento de porqué relaciona un hecho con el siguiente.
presentación:aquí la presentación está bajo el control del usuario, se ve el avance y la ubicación de los hechos en la presentación la cual puede profundizar visualizando la galería de imágenes y los textos que se desplieguen.
La manera en que la plataforma se desarrolla es registrándose ya sea a partir de los botones de "inicio", "registro" o "crear", la cual pide registrarse o iniciar sesión para comenzar.
- Cronovisor:Relata las características de la plataforma: Exploración, Organización y Presentación
- Perfil:Aquí el usuario se registra o inicia sesión, administra sus datos, revisa notificaciones y ve los grupos a los que pertenece.
- Explorador:El usuario ingresa términos de búsqueda, navega por Tiempo y Lugar.
- Temas:Selector de hechos y personajes por temas: Arte, Ciencia, Política, Religión, Tecnología.
- Clase:selector de elementos para ver sólo hechos o sólo personajes.
- Hechos:Donde se guardan los hechos seleccionados, permite crear cronovisión.
- Cronovisones:Donde se guardan las cronovisiones recién crea- das, permite su edición.
- Tutoriales:Textos y videos que enseñan como navegar, guardar hehos/personajes y crear/editar cronovisiones.
- Noticias:Actualizaciones de la paltaforma, mejoras, etc.
Partituras de interacción
Secuencias de acción e interacción del usuario con el proyecto. Aquí se ilustran las distintas maneras en las que el usuario trabajaría, exploraría y crearía las presentaciones con el uso de esta plataforma digital.
Wireframe IV
Crear/Ingresar cuenta
crear/ingresar cuenta: el usuario rellena los datos para acceder al perfil del sitio web.
Aviso:el sistema responde cuando los datos ingresados son erróneos.
Acceso Alumno:el usuario tipo alumno ingresa los datos.Va primero por ser el objetivo de la plataforma.
Acceso Profesor:Se debe determinar dato para que asegurar que se trata de un profesor.
Perfil Usuario
Datos personales:se rellena con los datos como curso, ubicación y foto de perfil.
Datos de acceso:le permite al usuario configurar y cambiar su correo y contraseña de ingreso.
Eliminar cuenta:en caso de ser necesario se le permite al usuario borrar su cuenta y sus datos.
Grupos:sección que muestra y permite acceder a los grupos de curso a las que el usuario pertenece.
Notificaciones:aquí recibe las invitaciones para unirse a un grupo, saber y contestar de actividades que se realicen en sus grupos o sus cronovisiones.
Sitio Web
Sobre Cronovisor:Información de qué es, porqué usarlo, cómo usarlo.
Tutoriales:Videos informativos de las actividades que en la plataforma se realizan.
Noticias:Actualizaciones, noticias e información acerca del progreso del sitio.
Home:Primera pantalla de búsqueda, ingreso de datos por palabra, años, ubicación y tema.
