Diferencia entre revisiones de «Cronovisor: Wireframes»

De Casiopea
(Wireframe VI)
 
(No se muestran 11 ediciones intermedias del mismo usuario)
Línea 4: Línea 4:
 
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.   
 
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">
+
<gallery widths="600px" heights="600px" perrow="1">
  
 
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-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.
Línea 28: Línea 28:
 
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.
 
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">
+
<gallery widths="600px" heights="600px" 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-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.
Línea 61: Línea 61:
 
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ó.
 
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">
+
<gallery widths="600px" heights="600px" 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-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.
Línea 73: Línea 73:
 
</gallery>
 
</gallery>
  
==Mapa de navegación II==
+
==Wireframe IV==
  
[[image:Mapa_de_navegación-03.png|center|thumb|700px]]
+
'''Crear/Ingresar cuenta'''
  
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.
+
<gallery widths="600px" heights="600px" perrow="2">
  
*'''Cronovisor''':Relata las características de la plataforma: Exploración, Organización y Presentación
+
image:CF_3_perfil.fw.png|'''crear/ingresar cuenta''': el usuario rellena los datos para acceder al perfil del sitio web.
  
*'''Perfil''':Aquí el usuario se registra o inicia sesión, administra sus datos, revisa notificaciones y ve los grupos a los que pertenece.
+
image:CF_4_perfil_error_1.fw.png|'''Aviso''':el sistema responde cuando los datos ingresados son erróneos.  
  
*'''Explorador''':El usuario ingresa términos de búsqueda, navega por '''Tiempo''' y '''Lugar'''.
+
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.
  
*'''Temas''':Selector de hechos y personajes por temas: Arte, Ciencia, Política, Religión, Tecnología.
+
image:CF_5_perfilerror_2.fw.png|'''Acceso Profesor''':Se debe determinar dato para que asegurar que se trata de un profesor.
  
*'''Clase''':selector de elementos para ver sólo hechos o sólo personajes.
+
</gallery>
  
*'''Hechos''':Donde se guardan los hechos seleccionados, permite crear cronovisión.
+
'''Perfil Usuario'''
  
*'''Cronovisones''':Donde se guardan las cronovisiones recién crea- das, permite su edición.
+
<gallery widths="600px" heights="600px" perrow="2">
  
*'''Tutoriales''':Textos y videos que enseñan como navegar, guardar hehos/personajes y crear/editar cronovisiones.
+
image:CF_editar_perfil_alumno_1.fw.png|'''Datos personales''':se rellena con los datos como curso, ubicación y foto de perfil.
  
*'''Noticias''':Actualizaciones de la paltaforma, mejoras, etc.
+
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.
  
==Partituras de interacción==
+
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.
  
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: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: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: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.  
  
[[image:Partitura_cronovisor_1-02.png|thumb|'''registro''': Aquí se le piden los siguientes datos=Nombre, Apellido, email y contraseña.|700px|center]]
+
</gallery>
  
[[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]]
+
'''Sitio Web'''
  
[[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]]
+
<gallery widths="600px" heights="600px" perrow="2">
  
[[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]]
+
image:CF_2_sobrecronovisor.fw.png|'''Sobre Cronovisor''':Información de qué es, porqué usarlo, cómo usarlo.
  
==Wireframe IV==
+
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>
 +
 
 +
==Wireframe V==
 +
 
 +
En la construcción de una plataforma virtual cuyo objetivo es facilitar el aprendizaje de la materia de Historia para alumnos en nivel escolar es fundamental responder las siguientes preguntas: ¿Cómo se evalúa a los alumnos? ¿cómo se sabe que aprendieron algo? En base a los documentos estudiados la respuesta es la siguiente:
 +
 
 +
Cuando conectan diferentes procesos:
 +
*identificando protagonistas importantes
 +
*identificando hechos relevantes 
 +
*resolver cómo se unen.
 +
 
 +
 
 +
En base a [[Cronovisor: Caso de Uso]] se presentan la siguiente manera de visualizar los contenidos, proponiendo una nueva manera de interfaz facilitando el trabajo para los alumnos.
 +
 
 +
 
 +
En vista que los datos que aparecen en el libro de texto no aparecen en todas las búsquedas por años en la wiki, pero si en el contenido de ciertas secciones de información, se hace preciso que la plataforma permita al usuario editar los '''''hechos''''' y '''''personajes''''' extraídos de la wiki para crear un ''hecho'' más conciso, que represente solo el dato que se quiere poner en evidencia, generando más ''"hechos"'' para la base de datos.
 +
 
 +
'''Búsqueda/Selección de Hechos'''
 +
 
 +
<gallery widths="250px" heights="120px" perrow=“2">
 +
 
 +
image:CF_1_home.fw.png|'''Búsqueda''':el usuario ingresa rango de datos, ubicación, tema, y tópico para su proyecto.
 +
image:CF_9_busqueda_1.fw.png|'''Hechos''':se presentan como breve ficha, ubicados geográficamente en el mapa, y en una linea temporal cronológica abajo.Se caracterizan por resaltar la fecha.
 +
image:CF_9_busqueda_2.fw.png|'''Personajes''':se presentan como breve ficha, ubicados geográficamente en el mapa, y en una linea temporal cronológica abajo. Se diferencia por icono y sus datos de fecha de nacimiento y muerte.
 +
image:CF_9_busqueda_3.fw.png|'''Vista extensa''':Tanto un Hecho como un Personaje se extienden para profundizar la información. Un personaje tiene mas extensión que un Hecho.
 +
image:CF_9_busqueda_4.fw.png|'''Selección''':al seleccionar se abre una ventana que invita a guardar la selección en 'galería', 'cronovision' o 'nueva cronovisión'
 +
image:CF_9_busqueda_6.fw.png|'''Guardar''':al seleccionar nueva cronovisión el sistema pide ingresar nombre de la presentación.
 +
image:CF_9_busqueda_5.fw.png|'''Aviso''':el sistema responde cuando se ha guardado la selección correctamente.
 +
 
 +
</gallery>
 +
 
 +
'''Cronovisiones'''
  
'''Crear/Ingresar cuenta'''
+
<gallery widths="250px" heights="120px" perrow=“2">
  
<gallery widths="250px" heights="250px" perrow="2">
+
image:CF_10_cronovisiones_1.fw.png|'''Hechos''':al guardar la selección el sistema lo organiza en esta galería si es Hecho. Se ordenan a partir del más reciente.
 +
image:CF_10_cronovisiones_2.fw.png|'''Personajes''':al guardar la selección el sistema lo organiza en esta galería si es Personaje. Se ordenan a partir del más reciente.
 +
image:CF_10_cronovisiones_3.fw.png|'''Cronovisiones''':al crear una cronovisión el sistema lo organiza en esta galería. Se ordenan a partir del más reciente.
  
image:CF_3_perfil.fw.png|'''crear/ingresar cuenta''': el usuario rellena los datos para acceder al perfil del sitio web.
+
</gallery>
  
image:CF_4_perfil_error_1.fw.png|'''Aviso''':el sistema responde cuando los datos ingresados son erróneos.
+
'''Crear/Editar Cronovisiones'''
  
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.
+
<gallery widths="250px" heights="120px" perrow=“2">
  
image:CF_5_perfilerror_2.fw.png|'''Acceso Profesor''':Se debe determinar dato para que asegurar que se trata de un profesor.
+
image:CF_10_cronovisiones_4.fw.png|'''Editar''':aquí puede organizar el orden en que se presentarán los hechos, siendo estos así no necesariamente cronológicos. Eliminar Hechos y Personajes. Agregar Hechos, Personajes y Relaciones.
 +
image:CF_10_cronovisiones_5.fw.png|'''Describir''':aquí el usuario puede agregar una breve descripción de la cronovisión, agregar imagen para presentar la cronovisión, como también agregar a un grupo.
 +
image:CF_10_cronovisiones_6.fw.png|'''Agregar Hecho/Personaje''': despliegue para seleccionar y agregar elementos a la cronovisión. Permite editar.
 +
image:CF_10_cronovisiones_7.fw.png|'''Agregar Relación''':permite agregar contenido para unir un elemento con otro según deducción del usuario.
 +
image:CF_10_cronovisiones_8.fw.png|'''Guardar''':el sistema responde para guardar la presentación como su actualización.
  
 
</gallery>
 
</gallery>
  
'''Perfil Usuario'''
+
==Wireframe VI==
 +
 
 +
'''Búsqueda/Selección de Hechos'''
 +
 
 +
<gallery widths="250px" heights="250px" perrow=“2">
 +
 
 +
image: CF_1_home_2.fw.png|home
 +
 
 +
image: CF_2_busqueda_1.fw.png|busqueda 1
 +
 
 +
image: CF_2_busqueda_1_2.fw.png|busqueda 2: especificar tiempo
 +
 
 +
image: CF_2_busqueda_1_3.fw.png|busqueda 3: especificar ubicación
 +
 
 +
image: CF_2_busqueda_1_4.fw.png|busqueda 4: especificar tema
  
<gallery widths="250px" heights="250px" perrow="2">
+
image: CF_2_busqueda_1_5.fw.png|busqueda 5: especificar tipo
  
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_2_busqueda_2.fw.png|busqueda 6: vista de un hecho
  
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_2_busqueda_3.fw.png|busqueda 6: vista de un personaje
  
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_2_busqueda_4.fw.png|busqueda 6: vista de un hecho/personaje extendido
  
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_3_selección.fw.png|seleccion y guardado de hecho
  
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.
+
image: CF_4_guardar_1.fw.png|creacion de cronovisión
  
 +
image: CF_4_guardar_2.fw.png|notificación de creación
 
</gallery>
 
</gallery>
  
'''Sitio Web'''
+
'''Crear/Editar Cronovisiones'''
 +
 
 +
<gallery widths="250px" heights="250px" perrow=“2">
 +
 
 +
image: CF_5_editar.fw.png|galería de cronovisiones
 +
 
 +
image: CF_5_editar_1.fw.png|editor de descripción
 +
 
 +
image: CF_5_editar_2.fw.png|guardado de descripción
  
<gallery widths="250px" heights="250px" perrow="2">
+
image: CF_5_editar_3.fw.png|creación relación
  
image:CF_2_sobrecronovisor.fw.png|'''Sobre Cronovisor''':Información de qué es, porqué usarlo, cómo usarlo.
+
image: CF_5_editar_4.fw.png|facetas cronovisión: mapa
  
image:CF_7_tutorial.fw.png|'''Tutoriales''':Videos informativos de las actividades que en la plataforma se realizan.
+
image: CF_5_editar_5.fw.png|facetas cronovisión: texto
  
image:CF_8_noticias.fw.png|'''Noticias''':Actualizaciones, noticias e información acerca del progreso del sitio.
+
image: CF_5_editar_5_2.fw.png|facetas cronovisión: texto
  
image:CF_1_home.fw.png|'''Home''':Primera pantalla de búsqueda, ingreso de datos por palabra, años, ubicación y tema.
+
image: CF_5_editar_6.fw.png|facetas cronovisión: imagenes
  
 
</gallery>
 
</gallery>

Revisión actual del 00:41 16 dic 2015

← 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.

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.

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ó.

Wireframe IV

Crear/Ingresar cuenta

Perfil Usuario

Sitio Web

Wireframe V

En la construcción de una plataforma virtual cuyo objetivo es facilitar el aprendizaje de la materia de Historia para alumnos en nivel escolar es fundamental responder las siguientes preguntas: ¿Cómo se evalúa a los alumnos? ¿cómo se sabe que aprendieron algo? En base a los documentos estudiados la respuesta es la siguiente:

Cuando conectan diferentes procesos:

  • identificando protagonistas importantes
  • identificando hechos relevantes
  • resolver cómo se unen.


En base a Cronovisor: Caso de Uso se presentan la siguiente manera de visualizar los contenidos, proponiendo una nueva manera de interfaz facilitando el trabajo para los alumnos.


En vista que los datos que aparecen en el libro de texto no aparecen en todas las búsquedas por años en la wiki, pero si en el contenido de ciertas secciones de información, se hace preciso que la plataforma permita al usuario editar los hechos y personajes extraídos de la wiki para crear un hecho más conciso, que represente solo el dato que se quiere poner en evidencia, generando más "hechos" para la base de datos.

Búsqueda/Selección de Hechos

Cronovisiones

Crear/Editar Cronovisiones

Wireframe VI

Búsqueda/Selección de Hechos

Crear/Editar Cronovisiones