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