Proyecto multimedia

Multimedia II Aula Virtual

http://aula-virtual.com.mx/ http://aula-virtual.com.mx/ 7 de diciembre de 2021

Profesora Araceli Granados García

Eddie Ricardo Cruz Peralta

Índice

6 Tipo de proyecto Objetivos Usuarios meta Listado de actividades Ruta crítica del proyecto Calendario de actividades

Arquitectura de la Información

14

Tabla de la organización de los contenidos Mapa de navegación

Diseño de Interfaz

24

Estilo grafico Esquemas Diseño de interfaz

Construcción

48

Diagramación Pantallas

Evaluación Prueba de funcionalidad local Prueba de funcionalidad en servidor Pruebas de usabilidad

68

FASE 1

Tipo de proyecto Objetivos Usuarios meta Listado de actividades Ruta crítica del proyecto Calendario de actividades

Aula Virtual El estudio requiere de constancia para poder mejorar y desarrollar las capacidades de los estudiantes. Cada uno cuenta con una forma distinta de aprendizaje, lo cual puede facilitar o dificultar su aprendizaje, esto además se va propiciando por el hecho de los tiempos programados en la escuela tanto en el aula como en los temarios que limitan la extensión de los temas, así como la cantidad de alumnos por grupo lo cual impide poder dar mayor tiempo de apoyo a los alumnos que presenten algunos problemas de aprendizaje quedando muchas veces dudas sin resolver y llevando a que exista un retraso en el aprendizaje, llevando a la frustración y hartazgo de algunos estudiantes y haciendo que busquen apoyo complementario en cursos fuera de la escuela o en tutoriales, esto resulta una forma de resolver dudas, pero, en ocasiones puede ser confusa debido al cambio que puede haber en el manejo de términos aprendiendo, pero, provocando cierto desface entre la información proporcionada por el profesor y por el asesor fuera de la escuela, tomando este problema planteo a través de este proyecto la creación de un aula virtual. El aula virtual será un espacio con la información vista en clase y proporcionada por el maestro, la cual se desarrollara en una mayor extensión, se incluirán ejemplos y se colocaran tutoriales que sean parecidos en la forma de enseñanza al maestro manejando términos iguales o semejantes al profesor o siendo realizados por el mismo, así también se colocara un apartado con las tareas a realizar durante la semana, información extra, e información relevante de la escuela como anuncio, recordando que no es una página de la escuela, sino un espacio para el aprendizaje del estudiante.

Para este proyecto pretendo realizar la simulación de una página para un profesor de escuela telesecundaria que imparte el 1 grado, recordando que el modelo de telesecundaria utiliza un solo profesor encargado de impartir todas las materias a un grupo de entre 15 y 25 alumnos, y que debe limitar sus tiempos para desarrollar todos sus temas a lo largo del ciclo escolar por lo cual una página con la información de la materia será de ayuda para poder resolver dudas de sus alumnos.

Tipo de proyecto Se realizará un aula virtual donde se contendrá la información de las materias impartidas en el primer grado de telesecundaria. La recopilación, análisis y resumen de la información expuesta se llevará a cabo por el profesor, además de esto se incluirán tareas e información relevante.

Tipo de proyecto • Mejorar el aprendizaje de los estudiantes • Mantener un mayor contacto con el alumno • Tener una fuente de consulta verificada.

• Volver más dinámico y ágil la forma de estudio

Usuarios meta Los estudiantes de primer grado. La idea es que el profesor encargado de grupo sea quien proporcione el link a los estudiantes.

Usuarios meta Edad

12 años

Genero

Femenino – masculino

Escolaridad

Secundaria (Nivel Básico de Educación)

Ocupación Nivel socioeconómico Intereses

Ubicación

Estudiante D+, C y C+ Estudiantes con el deseo de mejorar y ampliar conocimientos Oaxaca de Juárez, Oaxaca

Lista de actividades Fase 1: Definición y Planeación • Definición del proyecto • Investigación • Síntesis y resumen • Definición de objetivos • Selección de usuarios meta Fase 2: arquitectura de la información • Mapa de navegación Fase 3: Diseño de Interfaz • Definir el concepto grafico • Desarrollo de los esquemas Prototipo 1 Fase 4: Construcción • Síntesis de la información • Búsqueda de imágenes • Maquetación • Descargo de información Prototipo 2 Fase 5: Evaluación • Funcionamiento en servidor Fase Final: Usabilidad • Entrega

Calendario de actividades Actividad

Descripción

Fase 1

Definir y planear el tema del proyecto

-

1 semana

Fase 2

Arquitectura de la información

1

2 semana

Fase 3

Diseño de interfaz

Prototipo 1

Primer construcción2

Fase 4

Síntesis de la información y corrección de prototipo

P1

6, 7, 8 y 9 semana

Prototipo 2

Segunda evaluación (aplicación de correcciones)

4 - P1

10 semana

Fase 5

Evaluación

P2

11 semana

Predecesor

2

-3

Duración Semana

3 y 4 semana 5 semana

Fase Final

Pruebas de uso

5

12 semana

Entrega

Entrega

6

13 semana

Ruta Critica

H=0

H=0

H=0

H=0

0

0

0

1

1

2

4

5

9

10

11 12

12 13

13 13

0

0

0

1

1

2

4

5

9

10

11 12

12 13

13 13

Fase 5

Fase Final

Entrega

Inicio

H=0

Fase 1

H=0

H=0

H=0

Prototipo 2

Prototipo 1

Fase 2

Fase 3

Fase 4

2

4

5

2

4

5

H = 0H

9 9 =0

FASE 2

Arquitectura de la Información Tabla de la organización de los contenidos Mapa de navegación

Tabal de organización

Estructura Tema 1. Inicio

Descripción Página principal con una presentación del profesor.

Se mostrará en notas las sesiones revisadas en clase y las tareas para el día de mañana.

PresentaciónN

avegación

Actualización

Video muestra del profesor durante sus clases e ilustrando el uso de la página.

Habrá un menú horizontal para acceder a cada sección principal.

Las notas de tareas y lo revisado en clase se actualizará cada día.

Las materias se mostrarán como entrada en la página principal.

Se mostrará un menú horizontal para acceder a cada materia.

Toda la información se podrá editar.

Muestra el tema que se vio en clase en la entrada principal, este contendrá texto, imagen, video y audio según corresponda.

Se calendarizará para poder mostrarse de acuerdo al tema del día.

Se ingresará a una sub página de nombre índice donde se encontrarán los diferentes bloques de la materia.

Se podrá regresar al menú principal con un botón dentro del espacio.

Toda la información se podrá editar.

Muestra el tema que se vio en clase en la entrada principal, este contendrá texto, imagen, video y audio según corresponda.

Se calendarizará para poder mostrarse de acuerdo al tema del día.

Se ingresará a una sub página de nombre índice donde se encontrarán los diferentes bloques de la materia.

Se podrá regresar al menú principal con un botón dentro del espacio.

Toda la información se podrá editar.

2. Materias Al entrar a la página se mostrará en la pantalla las diferentes materias.

2.1 Español Subsección que muestra los temas de la materia en diferentes entradas.

2.2 Biología Subsección que muestra los temas de la materia en diferentes entradas.

Tema

Descripción

2.3 Formación Civica y Ética Subsección que muestra los temas de la materia en diferentes entradas.

2.4 Geografía Subsección que muestra los temas de la materia en diferentes entradas.

2.5 Historia Subsección que muestra los temas de la materia en diferentes entradas.

2.6 Matemáticas Subsección que muestra los temas de la materia en diferentes entradas.

PresentaciónN

avegación

Actualización

Muestra el tema que se vio en clase en la entrada principal, este contendrá texto, imagen, video y audio según corresponda.

Se calendarizará para poder mostrarse de acuerdo al tema del día.

Se ingresará a una sub página de nombre índice donde se encontrarán los diferentes bloques de la materia.

Se podrá regresar al menú principal con un botón dentro del espacio.

Toda la información se podrá editar.

Muestra el tema que se vio en clase en la entrada principal, este contendrá texto, imagen, video y audio según corresponda.

Se calendarizará para poder mostrarse de acuerdo al tema del día.

Se ingresará a una sub página de nombre índice donde se encontrarán los diferentes bloques de la materia.

Se podrá regresar al menú principal con un botón dentro del espacio.

Toda la información se podrá editar.

Muestra el tema que se vio en clase en la entrada principal, este contendrá texto, imagen, video y audio según corresponda.

Se calendarizará para poder mostrarse de acuerdo al tema del día.

Se ingresará a una sub página de nombre índice donde se encontrarán los diferentes bloques de la materia.

Se podrá regresar al menú principal con un botón dentro del espacio.

Toda la información se podrá editar.

Muestra el tema que se vio en clase en la entrada principal, este contendrá texto, imagen, video y audio según corresponda.

Se calendarizará para poder mostrarse de acuerdo al tema del día.

Se ingresará a una sub página de nombre índice donde se encontrarán los diferentes bloques de la materia.

Se podrá regresar al menú principal con un botón dentro del espacio.

Toda la información se podrá editar.

Tabal de organización

Estructura

Tabal de organización

Estructura Tema

Descripción

PresentaciónN

avegación

Actualización

2.7 Índice Se mostrará un tablero con vínculos hacia los respectivos bloques por materia.

3. Tareas Se mostrará como una nota la tarea a realizar.

4. Material Extra Archivos descargables en formato pdf.

Los vínculos estarán de un color cuando aun no se entre y cambiara luego de ingresar.

Se ira hacia el bloque seleccionado.

Se podrá actualizar.

Se mostrará una ventana emergente donde se podrá ver la tarea.

Se permitirá agregar tareas nuevas no se podrá eliminar ninguna solo se archivará como evidencia.

Se mostrarán dos entradas hacia cada sección archivos para imprimir y para recortar.

Entradas en la página principal a cada subsección.

Los permitirá subir archivos nuevos y eliminar los archivos que estén mal o que no sirvan.

Se muestra la totalidad de los archivos ubicados de en orden de uso a manera de galería con imagen y nombre.

Mostrará una ventana emergente donde se podrá visualizar el archivo a descargar, y se colocará el vínculo de descarga a lado.

Los permitirá subir archivos nuevos y eliminar los archivos que estén mal o que no sirvan.

En la entrada principal se podrá ver la tarea correspondiente al día, el resto de tareas realizadas al momento se podrá ver en la parte inferior ubicada por fecha.

4.1 Imprimibles Se mostrarán los archivos como una galería.

Tema

Descripción

PresentaciónN

avegación

Actualización

4.2 Recortables Se mostrarán los archivos como una galería.

Se muestra la totalidad de los archivos ubicados de en orden de uso a manera de galería con imagen y nombre.

Mostrará una ventana emergente donde se podrá visualizar el archivo a descargar, y se colocará el vínculo de descarga a lado.

Los permitirá subir archivos nuevos y eliminar los archivos que estén mal o que no sirvan.

Se mostrará un tablero en la página principal con los avisos, los demás se archivarán en pdf.

Se mostrará el ultimo aviso emitido por parte del titular de la página, y el resto de avisos se colocará en archivos pdf con la fecha para poder ubicarlos con mayor facilidad. El aviso podrá descargarse en caso de que se requiera.

Se abrirá una ventana emergente para poder leer el aviso y se colocará el vínculo de descarga a lado. Para ubicar los demás archivos se mostrarán en la parte de abajo como menú horizontal.

Solo se permitirá agregar avisos nuevos no borrarlos.

Se mostrarán una recopilación de los diferentes libros que usara el estudiante.

En la pantalla principal se mostrarán las entradas a las diferentes subsecciones, con imágenes que ilustren cada una.

Habrá un menú horizontal para mostrar las diferentes bibliotecas y regresar a la página principal.

Se podrán agregar libros.

Se mostrará una galería con las portadas de los libros y el título, así como una breve sinopsis de los mismos.

Se mostrará una previsualización de los libros con título.

Se abrirá en una nueva ventana donde podrán verlo y tendrá la opción de imprimir o descargar.

No se podrá actualizar, se podrá bloquear si así se requiere.

5. Avisos

6. Biblioteca

6.1 Libros de consulta

Tabal de organización

Estructura

Tabal de organización

Estructura Tema 6.2 Literatura Juvenil

6.3 Literatura Latinoamericana

6.4 Literatura Dramática

6.5 Literatura Romántica

Descripción

PresentaciónN

avegación

Actualización

Se mostrará una galería con las portadas de los libros y el título, así como una breve sinopsis de los mismos.

Se mostrará una previsualización de los libros con título.

Se abrirá en una nueva ventana donde podrán verlo y tendrá la opción de imprimir o descargar.

No se podrá actualizar, se podrá bloquear si así se requiere.

Se mostrará una galería con las portadas de los libros y el título, así como una breve sinopsis de los mismos.

Se mostrará una previsualización de los libros con título.

Se abrirá en una nueva ventana donde podrán verlo y tendrá la opción de imprimir o descargar.

No se podrá actualizar, se podrá bloquear si así se requiere.

Se mostrará una galería con las portadas de los libros y el título, así como una breve sinopsis de los mismos.

Se mostrará una previsualización de los libros con título.

Se abrirá en una nueva ventana donde podrán verlo y tendrá la opción de imprimir o descargar.

No se podrá actualizar, se podrá bloquear si así se requiere.

Se mostrará una galería con las portadas de los libros y el título, así como una breve sinopsis de los mismos.

Se mostrará una previsualización de los libros con título.

Se abrirá en una nueva ventana donde podrán verlo y tendrá la opción de imprimir o descargar.

No se podrá actualizar, se podrá bloquear si así se requiere.

1 Bloque

Español

Mapa de navegación

2 Bloque

Indice

3 Bloque

1 Bloque

Biología

2 Bloque

Indice

3 Bloque

1 Bloque

Matemáticas

2 Bloque

Indice

3 Bloque

1 Bloque

Formación Civica y Ética

2 Bloque

Indice

3 Bloque

1 Bloque

Geografía

2 Bloque

Indice

3 Bloque

1 Bloque

Inicio

Historia

2 Bloque

3 Bloque

Recortables

Imprimibles

Libros de consulta

Literatura Juvenil

Literatura Dramática

Literatura Romántica Literatura Latinoamericana

Indice

Correcciones Se añadió al mapa de navegación la sub página que faltaba en la biblioteca y se añadió la sub página “Índice” en los bloques de cada materia para poder enlazarlas.

FASE 3

Diseño de Interfaz Estilo grafico Esquemas Diseño de interfaz

Estilo grafico Estructura Elementos de Diseño D 2 retículas Retícula de 12 columnas columnas

Estudiantes de secundaria La secundaria representa un cambio en la forma de estudiar y en la vida personal de los estudiantes. Los estudiantes de primer grado son quienes experimenta este primer cambio, por esta razón quizás muchas veces ellos aún tienen ciertos gustos que podríamos denominar infantiles de alguna forma ya que les llama la atención los colores, las formas diferentes y los dibujos, aunque cuando se trata de temas de escuela muchas veces las imágenes son las divertidas fuera del texto y de las operaciones. Es por este motivo que decidí usar una variedad de colores amplia y tipografías que llamen la atención con serifas y remates, pero, que no sean tan ostentosas y que no se muestren como algo muy barroco. La idea principal fue crear una interfaz que tuviera un estilo grafico de videojuego, algo no muy llamativo, pero que de alguna manera remita a los videojuegos.

lineales

Imágenes de colores

Iconos

escripción Decidí usar 2 retículas para poder tener un mejor acomodo de las partes y así lograr un mejor uso del espacio.

Aunque en principio parece que se superponen una sobre otra ambas realizan un aporte distinto en la distribución del espacio.

Permite una mayor legibilidad de lso elementos en pantalla y ordenamiento.

Porque son del agrado de los estudiantes. Prefieren imágenes a color que dejan ver.

Abstracción de los elementos y acciones, para poder identificar rápidamente a que hacen referencia.

Animaciones sencillas

En algunos elementos para una mayor interactividad con la página. Uno será la campana de notificaciones que tendrá un punto rojo para informar de un nuevo aviso.

Video

Se ubicará en una casilla individual. No serán de reproducción automática.

Ventanas emergentes

Serán sencillas y contendrán un botón para descarga.

Esquemas

Esquema Index Inicio

Materias

Tareas

Material Extra

Avisos

Bienvenidos

Clase de Hoy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt u t laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl u t aliquip e x ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto

Tarea

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt u t laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl u t aliquip e x ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto

Biblioteca

Esquema

Inicio

Materias

Tareas

Material Extra

Materias

Avisos

Biblioteca

Entrada materias

Esquema Materias Inicio

Español

Matematicas

Biologia

Formacion

Formacion

Geografia

Historia

Matematicas Numeros Mixtos Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto gfhfdfdfdfdfdfdfdfdfdfdfd Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent

1 2 3

Esquema

Inicio

Materias

Tareas

Material Extra

Materias

Avisos

Biblioteca

Avisos y Tareas

Esquema Imprimibles Recortables

Inicio

Materias

Tareas

Material Extra

Materias

Avisos

Biblioteca

Esquema

Inicio

Materias

Tareas

Material Extra

Materias

Avisos

Biblioteca

Imprimibles Recortables

Esquema Entrada Bibliotecas

Inicio

Materias

Tareas

Material Extra

Materias

Avisos

Biblioteca

Esquema Bibliotecas Inicio

Materias

Tareas

Material Extra

Avisos

Biblioteca

Materias

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation Lorem ipsum

Esquema Lector PDF

Diseño de Interfaz

Esquema Index Inicio

Materias

Tareas

Material Extra

Avisos

Bienvenidos

Clase de Hoy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d iam nonummy n ibh euismod tincidunt u t laoreet dolore m agna a liquam erat volutpat. Ut w isi enim ad minim veniam, quis nostrud exerci t ation ullamcorper suscipit lobortis n isl ut a liquip ex e a commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto

Tarea

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d iam nonummy n ibh euismod tincidunt u t laoreet dolore m agna a liquam erat volutpat. Ut w isi enim ad minim veniam, quis nostrud exerci t ation ullamcorper suscipit lobortis n isl ut a liquip ex e a commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto

Biblioteca

Material Extra

Imagen y boton de entrada

areas

Imagen y boton de entrada

MateriasT

Imagen y boton de entrada

Imagen y boton de entrada

Inicio

Imagen y boton de entrada

Imagen y boton de entrada

Esquema

Logo

AvisosB iblioteca

Materias

Entrada materias

Esquema Logo

Materias Inicio

Español

Matematicas

Numeros Mixtos

BiologiaF

ormacion

Matematicas

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto gfhfdfdfdfdfdfdfdfdfdfdfd Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla

Geografia

Historia

Espacio para video

Galeria de videos

Tareas

1 2 3

Esquema Logo

Inicio

MateriasT

areas

Material Extra

AvisosB

iblioteca

Tareas

Previsualización de documento

Galeria de documentos

00/00/0000

00/00/0000

00/00/0000

00/00/0000

00/00/0000

00/00/0000

00/00/0000

Avisos y Tareas

Esquema Imprimibles Recortables

Logo

Inicio

MateriasT

Imagen y boton de entrada

areas

Material Extra

Material Extra

Avisos

Imagen y boton de entrada

Biblioteca

Esquema Logo

Inicio

MateriasT

areas

Material Extra

Avisos

Biblioteca

Recortables R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

R-000

Imprimibles Recortables

Material Extra

Imagen y boton de entrada

areas

Imagen y boton de entrada

MateriasT

Imagen y boton de entrada

Inicio

Imagen y boton de entrada

Entrada Bibliotecas

Imagen y boton de entrada

Esquema Logo

Avisos Biblioteca

Biblioteca

Esquema Bibliotecas Inicio

Imagen

MateriasT

areas

Imagen

Material Extra

Juvenil

Imagen

Avisos

Biblioteca

Imagen

Titulo

Titulo

Titulo

Titulo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad

Esquema

Ventana emergente Vista de documento

Lector PDF

Descargar

Correcciones Se cambia la barra de menú y el header cambiando el color y colocando los escudos de la escuela y de Telesecundaria. Se cambia el título de las entradas. Se coloca el footer y se añade un fondo.

Se rediseña la sub página de materias y se colocan elementos que la vuelvan gráficamente más atractiva. Se define la imagen de entrada a materias y bibliotecas.

FASE 4

Construcción Diagramación Pantallas

Diagramación

Inicio

Materias

Tareas

Material Extra

Avisos

Bienvenidos Clase de Hoy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto

Tarea

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto

Biblioteca

Pantallas

Elementos generales

Header

Menú

Ancho: auto Alto: 90px Letra Cambria 32px

Ancho: auto Alto: auto Padding: 15px Position: 100% Imágenes de botones Ancho: 128px Alto: 47px Ancho: 385px Alto: 70px

Título de pagina

Margen Superior: 10px Inferior: 10px Derecha: auto Izquierda: auto Padding: 10px Letra Baskerville 40px Ancho: auto Alto: auto Padding: 10px

Footer

Letra Lucida 12px

Página: Index Ancho: 313px Alto: 426px Video

Margen Superior: 50px Inferior: 30px Derecha: 25px Izquierda: 0px Padding: 50px Ancho: 400px Alto: 200px

Clase de hoy (cuadro nota)

Margen Superior: 40px Inferior: 40px Derecha: auto Izquierda: 145px Padding: 10px Letra Segoe 16px #000000 Ancho: 400px Alto: 200px

Clase de hoy (cuadro nota)

Alarma

Margen Superior: 0px Inferior: 40px Derecha: auto Izquierda: 145px Padding: 10px Letra Segoe 16px #000000 Ancho: 72px Alto: 85px

Página: Materias (entradas) Reticula

Ancho: 1260px Alto: auto Cellspace: 30px Margen: auto

Imágenes

Ancho: 185px Alto: 470px

Página: Materias Ancho: 650px Alto: auto #F2F2F2

Cuadro de texto

Margen Superior: 40px Inferior: 30px Derecha: 15px Izquierda: 0px Padding: 15px Letra Gill Sans 16px #000000 Ancho: 560px Alto: 320px

Visualizador videos

Margen Superior: 37px Inferior: 20px Derecha: auto Izquierda: 50px Contenedor Botones Ancho: 83px Alto: 83px Ancho: 575px Alto: 390px

Galería

Margen Superior: 0px Inferior: 40px Derecha: auto Izquierda: 23px Padding: 10px Contenedor Ancho: 428px Alto: 121px Ancho: 77px Alto: 23px

Índice

Margen Superior: 35px Inferior: auto Derecha: auto Izquierda: 0px

Página: Índice de bloques Ancho: 553px Alto: 403px Margen Superior: 30px Inferior: auto Derecha: auto Izquierda: auto Tablero

Padding Superior: 40px Inferior: 0px Derecha: 0px Izquierda: 0px Letra Consolas 16px #FFFFFF

Página: Biblioteca (entradas) Ancho: 1190px Alto: auto Botones entrada

Imágenes Ancho: 175px Alto: 470px

Página: Contenedor de libros Ancho: 1190px Alto: auto Reticula

Margen Superior: auto Inferior: auto Derecha: auto Izquierda: auto

Portadas

Ancho: 150px Alto: 235px

Recuadro de descripción

Ancho: 193px Alto: 221px

Página: Material extra

Retícula

Ancho: 732px Alto: 520px Margen Superior: 10px Inferior: 10px Derecha: auto Izquierda: auto Padding: 10px

Imágenes

Ancho: 296px Alto: 315px Alto: 68px #F2CB05

Recuadro

Letra Baskerville 400px #FFFFFF

Página: Imprimibles y Recortables Ancho: 780px Alto: 1313px Cellspace: 25px Retícula

Margen Superior: 70px Inferior: 50px Derecha: auto Izquierda: auto Padding: 10px

Imágenes

Ancho: 82px Alto: 82px Letra Impact 20px #FFFFFF

Página: Avisos y Tareas Ancho: 652px Alto: 360px

Tablero para lector PDF

Margen Superior: 30px Inferior: 30px Derecha: auto Izquierda: auto Visualizador Ancho: 540px Alto: 680px

Contenedor

Ancho: 795px Alto: 112px

Botones

Ancho: 82px Alto: 82px

Correcciones Automatización del ancho de pantalla para que responda al ancho del navegador.

FASE 5

Evaluación Prueba de funcionalidad local Prueba de funcionalidad en servidor Pruebas de usabilidad

Prueba de funcionamiento local (formato respondido)

Prueba de funcionamiento en servidor

Pruebas de usabilidad Pruebas Contestadas

Pruebas de usabilidad

Sentencia

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

1

5

5

5

5

5

3

5

3

5

5

4

1

5

4

5

5

5

5

5

5

2

4

4

4

4

4

3

4

3

4

4

3

1

4

4

5

5

5

4

5

5

3

5

5

5

5

4

4

5

3

5

5

4

1

5

4

5

5

5

4

5

5

4

5

5

4

4

4

4

5

2

5

5

4

1

5

4

5

5

5

5

5

5

5

5

5

5

5

5

3

5

4

5

5

4

1

5

4

5

5

5

5

5

5

6

5

5

5

5

5

4

5

5

5

5

4

1

5

4

5

5

5

5

5

5

Total

29

29

28

28

27

21

29

20

29

29

23

6

29

24

30

30

30

28

30

30

Diseño (DI)

Sentencia 6 Negativo 30% Positivo 70%

Negativo

Sentencia 16 Negativo 0%

Positivo 100% Positivo

Negativo

Positivo

Control (CO)

Sentencia 7

Sentencia 12

Negativo 3%

Negativo 0%

Positivo 20% Negativo 80%

Positivo 97% Negativo

Sentencia 19

Positivo

Negativo

Positivo 100%

Positivo

Negativo

Sentencia 17

Sentencia 20

Negativo 0%

Negativo 0%

Positivo 100%

Positivo 100%

Negativo

Positivo

Negativo

Positivo

Positivo

Eficiencia (EF)

Sentencia 2 Negativo 3%

Negativo 6%

Positivo

Negativo

Positivo

Sentencia 13 Negativo 3%

Positivo 97%

Negativo

Sentencia 8 Negativo 25% Positivo 75%

Positivo 94%

Positivo 97% Negativo

Sentencia 3

Positivo

Negativo

Positivo

Ayuda (AY)

Sentencia 1 Negativo 5%

Positivo

Sentencia 9 Negativo 3%

Negativo

Positivo

Sentencia 18 Negativo 9%

Positivo 91%

Positivo 97% Negativo

Negativo 9%

Positivo 91%

Positivo 95% Negativo

Sentencia 4

Positivo

Negativo

Positivo

Aprendizaje (AP)

Sentencia 5

Sentencia 10 Negativo 5%

Negativo 13%

Positivo 87% Negativo

Sentencia 11 Negativo 23% Positivo 77%

Positivo 95% Positivo

Negativo

Sentencia 14 Negativo 23% Positivo 77%

Negativo

Negativo

Positivo

Sentencia 15 Negativo 0%

Positivo 100% Positivo

Negativo

Positivo

Positivo

Grafica final de acuerdo a los categorías

Categorías 100% 6 95%

17

14 9

25

90%

85%

114

133

106 80%

51

125

75% Diseño

Control

Eficiencia Positivo

Negativo

Ayuda

Aprendizaje

Reporte escrito

El 70% de los encuestados considera que el sitio tiene un diseño agradable, pero, no es algo que les convenza del todo.

Los cambios que se deberán de realizar son en los colores y también verificar como se observan en diferentes pantallas ya que en eso puede existir una diferencia significativa. El acomodo es lo que resulto agradable para leer y verificar la información. El 97% de los encuestados considera que es fácil navegar por este sitio web, logrando identificar cada apartado y obteniendo lo que desean. Los nombres son claros y las imágenes logran identificar algunos elementos.

El 80% considera que no puede contactar a la gente que quiere a través de este sitio, porque no hay forma de hacerlo ya que no hay números de contacto, correos electrónicos o forma de enviar algún mensaje. El 97% considera que no es difícil navegar por este sitio web y que es fácil de encontrar. El 75% nota que la pagina es lenta al momento de cargar, aunque se mantienen en una posición neutral, lo cual considero como un punto medio y esto quizás suceda en las páginas que están llenas de imágenes y los lectores pdf como en la sección “Biblioteca”. Como dato interesante el 97% considera que se siente eficiente cuando utiliza esta página web, esto es quizás por ser un sitio educativo y por tener la información condensada junto a imágenes y videos. En las sentencias de ayuda los encuestados consideran que es de utilidad la página web al contener información de su interés, tener lógica en el contenido y no lo consideran una pérdida de tiempo, lo cual me hace saber que trabajar de esta forma los temas de la escuela se les hace atractivo. El 87% considera que no es necesario tener información introductoria que les ayude a utilizar el sitio web lo cual habla de su habilidad en la navegación de páginas web, así el 95% considera que no hay problema para familiarizarse con la navegación. El 77% considera que no les gusta del todo navegar por este sitio, aunque puede contrastar con la categoría anterior, considero que es normal porque preferirían otro sitio, por ejemplo, no es lo mismo navegar en la Wikipedia que en YouTube, aun cuando la Wikipedia les ofrece información útil y la usan. El 77% considera que es difícil saber si este sitio web contiene lo que quieren y eso se debe a que este sitio contiene información para alumnos del 1 grado de secundaria y ellos ya están en 3 grado, así que quizás por eso lo consideran así. Por último, el 100% considera que es fácil utilizar este sitio web la primera vez.

En términos generales puedo decir que es bien vista la pagina como medio para aprender, esto como conclusión de las encuestas realizadas a los estudiantes, falta mejorar el diseño y poder adaptarlo de forma general a todos los estudiantes, en este caso como ejercicio para alumnos de 1° de secundaria, quizás funcionaria no así en el caso de estudiantes de 3° de secundaria, que preferirían quizás un diseño con menos colores y más contrastante, aun así el ejercicio resulto ser bueno para conocer los gustos del sector.

Evaluacion compañero

Multimedia II Aula Virtual