Vous êtes sur la page 1sur 196

UNIVERSIDAD CATOLICA DE TEMUCO FACULTAD DE CIENCIAS

SISTEMA DE PORTAFOLIO EN LINEA FACULTAD DE EDUCACION

POR

Marcelo Omar Sez Segura Trabajo de Ttulo presentado a : Facultad de Ciencias de la Universidad Catlica de Temuco

Para optar al ttulo de Ingeniero de Ejecucin en Informtica

- Temuco, 2004 -

Dedicado : A mis padres por su gran amor, constante apoyo y paciencia durante toda mi vida. A Alejandra por su constante apoyo, confianza, paciencia y amor durante todo este tiempo.

AGRADECIMIENTOS

A Dios por la sabidura entregada y su gran ayuda en todas las pruebas y dificultades de la vida.

A mi profesor Gua Sr. Gustavo Donoso Montoya, quien me ha apoyado y guiado en los cursos en los cuales he tenido la oportunidad de estar con l, demostrndome que ha sido ms que un profesor, un amigo.

A los profesores Sra. Mara Elena Mellado Hernndez y Sr. Mauricio Betti, de la Facultad de Educacin de la Universidad Catlica quienes me han apoyado durante todo el proceso desarrollo de software de la aplicacin de Portafolio en Lnea.

A todas las personas que de una u otra forma me han apoyado ya sea con una palabra de nimo o con una sonrisa, de todos ellos me siento muy agradecidos. En especial de mis amigos Enry, Patricio y Ricardo.

UNIVERSIDAD CATLICA DE TEMUCO


FACULTAD DE CIENCIAS

COMISIN EXAMEN DE TITULO Este Examen de Ttulo ha sido realizado en la Escuela de Informtica.

Presidente Comisin

............................................................................... Sr. Osvaldo Rubilar Alarcn Decano Facultad de Ciencias

Profesor Gua

............................................................................... Sr. Gustavo Donoso Montoya Ingeniero Civil Informtico

Profesor Informante

............................................................................... Sr. Luis Alberto Caro Saldivia Ingeniero Civil en Informtica

Secretario Acadmico Escuela de Informtica

............................................................................... Sr. Luis Alberto Caro Saldivia Ingeniero Civil en Informtica

Coordinador de Tesis

............................................................................... Sr. Mario Ramrez Espinoza Master en Fsica

Temuco, Agosto de 2004

Portafolio en lnea, Facultad de Educacin

INDICE
INDICE INDICE DE TABLAS INDICE DE FIGURAS INDICE DE APENDICES INDICE DE ANEXOS RESUMEN SUMARY INTRODUCCION i v vii ix x 1 2 3

CAPITULO I, ANTECEDENTES Y DESCRIPCION GENERAL DEL PROBLEMA 5


1.1 1.1.1 1.2 1.3 Descripcin general del problema Definicin de portafolio Objetivo general Objetivos especficos 6 7 9 10

CAPITULO II, ANALISIS DE REQUERIMIENTOS


2.1 Modelo de casos de uso Definicin de UML Modelos de casos de uso Notaciones UML para diagramas de caso de uso 2.2 Diagramas de casos de uso 2.2.1 Diagrama de Casos de usos para la autentificacin de usuario 2.2.2 Generalizacin y herencia entre los actores Alumno y Profesor 2.2.3 Diagrama del patrn de Casos de usos para mantencin de tablas 2.2.4 Diagrama de Casos de usos para un Alumno en el Portafolio 2.2.5 Diagrama de Casos de usos para un Profesor en el Portafolio 2.2.6 Diagrama de Casos de usos para el Administrador del Portafolio 2.3 Descripcin extendida de casos de uso para el alumno 2.3.1 Caso de uso : Autentificar usuario 2.3.2 Caso de uso : Inscripcin de Alumno en Portafolio 2.3.3 Caso de uso : Inscripcin de Alumno en Portafolio 2.3.4 Caso de uso : Seleccionar curso para el portafolio 2.3.5 Caso de uso : Seleccin de Facetas y/o Criterios 2.3.6 Caso de uso : Listar comentarios crticos 2.3.7 Caso de uso : Crear/Editar comentarios crticos 2.3.8 Caso de uso : Eliminar comentario crtico 2.3.9 Caso de uso : Listar evidencias 2.3.10 Caso de uso : Almacenar evidencias 2.3.11 Caso de uso : Ver evidencia y comentarios 2.3.12 Caso de uso : Crear/Editar comentario a evidencia 2.1.1 2.1.2 2.1.3

11 12 12 13 14 15 15 16 17 18 20 21 22 23 24 25 26 27 28 29 30 31 32 34 35

Portafolio en lnea, Facultad de Educacin 2.3.13 2.3.14 2.3.15 2.3.16 2.3.17 2.3.18

ii

Caso de uso : Eliminar comentario a evidencia 36 Caso de uso : Eliminar evidencias 37 Caso de uso : Generar portafolio de producto 38 Caso de uso : Personalizar datos del portafolio 39 Caso de uso : Seleccionar Facetas, comentarios y evidencias 40 Caso de uso : Generar Portafolio off-line 42 2.4 Descripcin extendida de casos de uso para el profesor 44 2.4.1 Caso de uso : Listar cursos 45 2.4.2 Caso de uso : Configurar portafolios 46 2.4.3 Caso de uso : Listar alumnos del curso 47 2.4.4 Caso de uso : Listar elementos nuevos 48 2.4.5 Caso de uso : Listar comentarios crticos 49 2.4.6 Caso de uso : Crear/Editar comentario para el alumno 50 2.4.7 Caso de uso : Listar evidencias del alumno 51 2.4.8 Caso de uso : Crear/Editar comentario para evidencia 52 2.5 Requerimientos funcionales 53 2.5.1 Para el alumno 53 2.5.2 Para el profesor 54 2.5.3 Para el administrador 54 2.6 Requerimientos operacionales 55 2.6.1 Requerimientos de software 55 2.6.2 Requerimientos de hardware 56 2.6.3 Requerimientos de interfaz y diseo 57 2.6.3.1 Interfaz amigable, que simule o parezca un portafolio 57 2.6.3.2 Que frecuentemente informe al usuario respecto de la faceta o criterio en la cual va a trabajar 58 2.6.3.3 La edicin de los comentarios crticos debe ser amigable, que permita dar formato a textos para potenciar la edicin 58 2.6.4 Requerimientos de tiempos de respuesta 59 2.6.4.1 Tiempos de respuesta acordes con la conexin establecida 59 2.6.5 Requerimientos de espacio en disco en el servidor 60

CAPITULO III, ANALISIS


3.1 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 Modelo de anlisis Modelo de anlisis para las evidencias del alumno Modelo de anlisis para los comentarios del alumno Modelo de anlisis para el portafolio de producto del alumno Modelo de anlisis para generar el portafolio de producto Modelo de anlisis para el profesor Modelo de anlisis para el Administrador

61 62 62 63 64 65 66 67

Portafolio en lnea, Facultad de Educacin

iii 68

CAPITULO IV, DISEO

Lenguaje de desarrollo de la aplicacin 69 Introduccin a los modelos de sistema 70 4.1 Modelo relacional de datos para el portafolio en lnea 71 4.2 Descripcin de la base de datos 72 4.3 Diseo de la interfaz de usuario 76 4.3.1 Elementos descriptivos para la interfaz de usuario 76 4.3.2 Interfaz principal del portafolio en lnea 77 4.3.3 Interfaz para listar y almacenar evidencias 78 4.3.4 Interfaz para visualizar, crear y/o editar comentarios a evidencias 79 4.3.5 Interfaz para listar comentarios a criterios 80 4.3.6 Interfaz para la edicin de comentarios crticos 81 4.3.7 Interfaz de men portafolio de producto off-line 82 4.3.8 Interfaz para personalizar datos del portafolio de producto 83 4.3.9 Interfaz para seleccionar las facetas del portafolio de producto 85 4.3.10 Interfaz para la generacin de portafolio de producto 87 4.3.11 Interfaz para descargar el portafolio de producto final 87 4.3.12 Interfaz para listar elementos nuevos al revisar un portafolio por parte del profesor a un alumno 88 4.3.13 Interfaz para configurar un portafolio de un alumno 89 4.4 Diseo de procesos 90 4.4.1 Proceso para almacenar y listar evidencias 91 4.4.2 Proceso para crear y/o editar comentarios crticos 92 4.4.3 Men para generar el portafolio de producto 93 4.4.4 Proceso para personalizar y crear portafolio de producto 94 4.4.5 Proceso de seleccin de facetas del portafolio de producto 95 4.4.6 Proceso de seleccin de comentarios crticos para el portafolio de 96 producto 4.4.7 Proceso de seleccin de evidencias para el portafolio de producto 97 4.4.8 Proceso para generar el portafolio de producto 98 4.4.9 Proceso para listar elementos nuevos del alumno 100 4.5 Diseo de almacenamiento en el servidor 101

CAPITULO V, IMPLEMENTACION
5.1 5.2 5.2.1 5.2.2 5.2.3 5.2.4 5.2.5 5.2.6 5.2.7 5.2.8

102

Implementacin de la base de datos 103 Implementacin de interfaces 113 Interfaz amigable, que simule o parezca un portafolio 113 Interfaz que informe al usuario respecto de la faceta o criterio en la cual va a trabajar 114 Edicin de los comentarios crticos debe ser amigable 115 Diseo de la interfaz de usuario 116 Implementacin de interfaz para listar y almacenar evidencias 117 Implementacin de interfaz para visualizar evidencias 118 Implementacin de interfaz listar comentarios crticos 119 Implementacin de interfaz editar comentarios crticos 119

Portafolio en lnea, Facultad de Educacin 5.2.9 5.2.10

iv

Implementacin de interfaz de men de portafolio de producto 120 Implementacin de interfaz para personalizacin de un portafolio de producto 121 5.2.11 Implementacin de interfaz para seleccin de facetas 122 5.2.12 Implementacin de interfaz para seleccin de comentarios 123 5.2.13 Implementacin de interfaz para seleccin de evidencias 124 5.2.14 Implementacin de interfaz para generacin de portafolio de 125 producto navegable off-line 5.2.15 Vista preliminar de un portafolio de producto finalizado 125 5.2.16 Implementacin de interfaz para listar alumnos de un curso 126 5.2.17 Implementacin de interfaz para configurar un portafolio de alumnos 126 5.2.18 Implementacin de interfaz para visualizar elementos nuevos de un alumno 127 5.2.19 Implementacin de Interfaz para administracin de tablas 128 5.3 Implementacin de procesos 129 5.3.1 Procesos en del servidor 130 5.3.1.1 Almacenar evidencias en el servidor 131 5.3.1.2 Obtencin de la ruta de las evidencias almacenadas 132 5.3.1.3 Editar un comentario crtico 134 5.3.1.4 Crear un portafolio de producto navegable off-line 135 5.3.2 Procesos en el cliente 142 5.3.2.1 Cdigo para cargar el editor RTF 143 5.3.2.2 Validar nombres de archivo compatibles Windows/Linux 144 5.3.2.3 Chequeo de casillas de verificacin para eliminar evidencias 145 5.4 Pruebas de sistema 146 5.4.1 Subir un documento al servidor 146 5.4.2 Llamada autentificada del portafolio desde otro sistema Web 148 5.4.3 Generacin de una pgina HTML a partir de una plantilla PHP 149 5.4.4 Iconos personalizados en las evidencias 151 5.5 Implementacin del sitio Web 152 5.5.1 Implementacin de la aplicacin en el servidor Web 152 5.5.2 Implementacin de los portafolios en el sitio 153 CONCLUSIONES BIBLIOGRAFIA APENDICES ANEXOS 154 155 156 175

Portafolio en lnea, Facultad de Educacin

INDICE DE TABLAS
(Tabla 2.3.1) (Tabla 2.3.2) (Tabla 2.3.3) (Tabla 2.3.4) (Tabla 2.3.5) (Tabla 2.3.6) (Tabla 2.3.7) (Tabla 2.3.8) (Tabla 2.3.9) (Tabla 2.3.10) (Tabla 2.3.11) (Tabla 2.3.12) (Tabla 2.3.13) (Tabla 2.3.14) (Tabla 2.3.15) (Tabla 2.3.16) (Tabla 2.3.17) (Tabla 2.3.18) (Tabla 2.4.1 ) (Tabla 2.4.2) (Tabla 2.4.3) (Tabla 2.4.4 ) (Tabla 2.4.5) (Tabla 2.4.6) (Tabla 2.4.7) (Tabla 2.4.8) (Tabla 2.6.5) (Tabla 4.3.1) (Tabla 5.1.1) (Tabla 5.1.2) (Tabla 5.1.3) (Tabla 5.1.4) (Tabla 5.1.5) (Tabla 5.1.6) (Tabla 5.1.7) (Tabla 5.1.8) (Tabla 5.1.9) (Tabla 5.1.10) (Tabla 5.1.11) (Tabla 5.1.12) (Tabla 5.1.13) (Tabla 5.1.14) (Tabla 5.1.15) Caso de uso : Autentificacin de usuario Caso de uso : Inscripcin de Alumno en Portafolio Caso de uso : Inscripcin de alumno en portafolio Caso de uso : Seleccin de curso para el portafolio Caso de uso : Seleccin de facetas y/o criterios Caso de uso : Listar comentarios crticos Caso de uso : Crear o editar comentarios crticos Caso de uso : Eliminar comentario crtico Caso de uso : Listar evidencias Caso de uso : almacenar evidencias Caso de uso : Ver evidencia y comentario Caso de uso : Crear/Editar comentario a evidencia Caso de uso : Eliminar comentario a evidencia Caso de uso : Eliminar evidencias Caso de uso : Generar portafolio de producto Caso de uso : personalizar datos del portafolio de producto Caso de uso : Seleccionar Facetas, comentarios y evidencias Caso de uso : Generar portafolio off-line Caso de uso : Listar cursos Caso de uso : Configurar portafolios Caso de uso : Listar alumnos del curso Caso de uso : Listar elementos nuevos Caso de uso : Listar comentarios crticos Caso de uso : Crear/Editar comentario para el alumno Caso de uso : Listar alumnos del curso Caso de uso : Listar alumnos del curso Tabla de clculo de espacio en disco para almacenamiento Tabla de elementos bsicos para construir interfaces Tabla de entradas Tabla de perfiles Tabla servidor Tabla de control de acceso Tabla de carreras Tabla de cursos Tabla de tipos de archivos Tabla de inscripciones Tabla de usuarios Tabla de portafolio de procesos Tabla de comentarios Tabla de producto para seleccin de facetas Tabla de datos para el portafolio de producto Tabla de evidencias para el portafolio de producto Tabla de comentarios para el portafolio de producto 23 24 25 26 27 28 29 30 31 32 34 35 36 37 38 39 40 42 45 46 47 48 49 50 51 52 60 76 103 103 104 104 104 105 105 106 107 108 109 109 110 111 112

Portafolio en lnea, Facultad de Educacin

vi

(Tabla (Tabla (Tabla (Tabla (Tabla (Tabla (Tabla (Tabla

5.3.1.1) 5.3.1.2) 5.3.1.3) 5.3.1.4) 5.3.1.5) 5.3.1.6) 5.3.1.7) 5.3.1.8)

(Tabla 5.3.1.9) (Tabla (Tabla (Tabla (Tabla (Tabla 5.3.2.1) 5.3.2.2) 5.3.2.3) 5.4.1) 5.4.1.1)

Almacenar evidencias en el servidor Obtencin de la ruta de las evidencias almacenadas Listar las evidencias de un directorio Crear o editar un comentario crtico Proceso para crear el men del portafolio de producto Proceso para crear las facetas del portafolio de producto Proceso para crear los comentarios del portafolio de producto Proceso para crear las pginas de evidencias del portafolio de producto Proceso comprimir la carpeta de producto

131 132 133 134 137 138 139 140 141

(Tabla 5.4.2) (Tabla 5.4.2.1) (Tabla 5.4.3) (Tabla 5.4.4)

Cdigo para cargar el editor RTF 143 Validar nombres de archivo compatibles Windows/Linux 144 Chequeo de casillas de verificacin para eliminar evidencias 145 Cdigo fuente para copiar un archivo al servidor 146 Cdigo de configuracin PHP para aumentar el tamao de los 147 archivos que son almacenados en disco Cdigo para aceptar una llamada de validacin externa al 148 portafolio Enlace para llamar al portafolio desde otro sistema 148 Cdigo para generar una pgina HTML a partir de una PHP 150 Cdigo para leer una imagen BLOB desde una tabla mySQL 151

Portafolio en lnea, Facultad de Educacin

vii

INDICE DE FIGURAS
(Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura 1.1.1) 2.1.3.1) 2.1.3.2) 2.1.3.3) 2.2.1) 2.2.2) 2.2.3) 2.2.4) 2.2.5) 2.2.6) 3.1.1) 3.1.2) 3.1.3) 3.1.4) 3.1.5) 3.1.6) 4.0.1) 4.0.2) 4.1) 4.3.2) 4.3.3) 4.3.4) 4.3.5) 4.3.6) 4.3.7) 4.3.8) 4.3.9) 4.3.10) 4.3.11) 4.3.12) 4.3.13) 4.4.1) 4.4.2) 4.4.3) 4.4.4) 4.4.5) 4.4.6) 4.4.7) 4.4.8) 4.4.9) Esquema de un portafolio 7 Representacin grfica de un actor 14 Representacin grfica de un caso de uso 14 Representaciones de relaciones de casos de uso 14 Diagrama de casos de uso para autentificacin de usuario 15 Diagrama generalizacin y herencia entre los actores Alumno y Profesor 16 Diagrama de casos de uso para autentificacin de usuario 17 Diagrama de Casos de usos para un Alumno en el Portafolio 18 Diagrama de Casos de usos para un Alumno en el Portafolio 20 Diagrama de Casos de usos el administrador de sistema 21 Modelo de anlisis para las evidencias del alumno 62 Modelo de anlisis para los comentarios del alumno 63 Modelo de anlisis para el portafolio de producto 64 Modelo de anlisis para generar el portafolio de producto 65 Modelo de anlisis para el profesor 66 Modelo de anlisis para el administrador 67 Descripcin de una entidad en el modelo relacional 68 Descripcin de una relacin en el modelo relacional 68 Modelo relacional para el sistema de portafolios 71 Interfaz principal del portafolio en lnea 77 Interfaz para listar y almacenar evidencias 78 Interfaz para visualizar crear y editar comentarios a evidencias 79 Listado de comentarios crticos en un criterio 80 Interfaz para edicin de comentarios crticos 81 Interfaz para el men de portafolio de producto 82 Interfaz para personalizar y crear un portafolio de producto 83 Interfaz para seleccionar facetas del portafolio de producto 85 Interfaz para el men de portafolio de producto 87 Interfaz para descargar el portafolio de producto final 87 Interfaz listar elementos nuevos de un portafolio 88 Interfaz para configurar un portafolio 89 Diagrama de flujo para almacenar y listar evidencias 91 Diagrama de flujo para crear y editar comentarios crticos 92 Diagrama de flujo del men para generar portafolio de producto 93 Diagrama de crear y personalizar un portafolio de producto 94 Diagrama de flujo del para seleccionar facetas 95 Diagrama de flujo para seleccionar comentarios crticos 96 Diagrama de flujo para seleccionar evidencias 97 Diagrama de flujo para generar un portafolio off-line 98 Diagrama de flujo para visualizar elementos nuevos 100

Portafolio en lnea, Facultad de Educacin (Figura 4.5) (Figura 5.2.1 ) (Figura 5.2.2) (Figura 5.2.3) (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura (Figura 5.2.4) 5.2.5) 5.2.6) 5.2.7) 5.2.8) 5.2.9) 5.2.10) 5.2.11) 5.2.12) 5.2.13) 5.2.14)

viii

Diagrama jerrquico del almacenamiento de evidencias en disco 101 Interfaz bsica de trabajo para el portafolio 113 Interfaz con pestaas e informacin de trabajo para un alumno 114 Interfaz para texto enriquecido con HTML ofrecido por Interactive Tools 115 Editor RAD para construccin de interfaces HTML y PHP 116 Implementacin de interfaz para listar y almacenar evidencias 117 Implementacin de interfaz para visualizar evidencias 118 Implementacin de interfaz para listar comentarios crticos 119 Implementacin de interfaz editar comentarios crticos 119 Implementacin de men de portafolio de producto 120 Implementacin de interfaz para personalizacin de un portafolio de producto 121 Implementacin de interfaz para seleccin de facetas 122 Implementacin de interfaz para seleccin de comentarios 123 Implementacin de interfaz para seleccin de evidencias 124 Implementacin de interfaz para generacin de portafolio de 125 producto navegable off-line Vista preliminar de un portafolio de producto finalizado 125 Implementacin de interfaz para listar alumnos de un curso 126 Implementacin de interfaz para configurar un portafolio de alumnos 126 Implementacin de interfaz para visualizar elementos nuevos de un alumno 127 Mantenedor de cursos 128 Ingreso de datos usando un mantenedor de tablas 128 Ilustracin del modelo de tres niveles y la ejecucin de 129 procesos cliente/servidor Chequeo de casillas de verificacin para eliminar evidencias 152 Implementacin de los portafolios en el sitio 153

(Figura 5.2.15) (Figura 5.2.16) (Figura 5.2.17) (Figura 5.2.18) (Figura 5.2.19) (Figura 5.2.20) (Figura 5.3) (Figura 5.5.1) (Figura 5.5.2)

Portafolio en lnea, Facultad de Educacin

ix

INDICE DE APENDICES
Glosario de trminos Apndices de pantallas de sistema (Figura 1) Bienvenida al sistema (Figura 2) Autentificacin de usuario (Figura 3) Lista de cursos disponibles para inscripcin (Figura 4) Formulario de inscripcin de cursos para portafolio (Figura 5) Bienvenida a un usuario autentificado (Figura 6) Seleccin de una Faceta y listado de criterios (Figura 7) Edicin de comentarios crticos para una faceta (Figura 8) Muestra de un comentario crtico almacenado (Figura 9) Seleccin de un criterio (Figura 10) Listado de evidencias de un criterio (Figura 11) Seleccin de evidencias para ser almacenada (Figura 12) Mensaje de confirmacin al subir una evidencia (Figura 13) Vista de una evidencia y un comentario a ella (Figura 14) Lista de comentarios crticos a un criterio (Figura 15) Men de generacin de portafolio de producto (Figura 16) Personalizacin y creacin de portafolio (Figura 17) Seleccin y personalizacin de facetas (Figura 18) Seleccin y personalizacin de facetas (Figura 19) Seleccin de evidencias (Figura 20) Opciones para generacin de sitio off-line (Figura 21) Vista preliminar (1) de un portafolio de producto (Figura 22) Vista preliminar (2) de un portafolio de producto (Figura 23) Vista preliminar (3) de un portafolio de producto (Figura 24) Pgina de descarga de un portafolio de producto (Figura 25) Pgina bienvenida de un profesor (Figura 26) Listado de alumnos de un curso para revisin de portafolios (Figura 27) Listado elementos nuevos en un portafolio (Figura 28) Listado evidencias de un alumno para revisin del profesor (Figura 29) Revisin de una evidencia y comentario por el profesor (Figura 30) Mantenedor de cursos del portafolio 156 160 160 160 161 161 162 162 163 163 164 164 165 165 166 166 167 167 168 168 169 169 170 170 171 171 172 172 173 173 174 174

Portafolio en lnea, Facultad de Educacin

INDICE DE ANEXOS
1.1 1.1 1.1.1 1.1.2 1.2 1.2.1 1.2.2 1.3 1.3.1 1.3.2 1.3.3 Requisitos para la implantacin y uso del sistema de portafolio en lnea 175 Requerimientos de software 175 Requerimientos para la ejecucin de la aplicacin en el servidor 175 Cliente o navegador Web para visualizacin de la aplicacin 176 Requerimientos de hardware 177 Requerimientos de plataforma de hardware para la ejecucin del portafolio en lnea 177 Requerimientos de hardware para la edicin de videos y captura de imgenes 178 Requerimientos para el cliente 179 Conexin a Internet 179 Navegador Web 179 Software adicional (en casos opcionales) 180

Portafolio en lnea, Facultad de Educacin

RESUMEN

El desarrollo de aplicaciones para plataforma Web con acceso a datos ha tenido un gran auge estos ltimos aos, lenguajes como ASP, PHP de parte del servidor, el avance de los navegadores y el aumento en el ancho de banda de las conexiones a Internet permiten generar da a da aplicaciones ms complejas.

El informe siguiente tiene como objetivo dar a conocer el desarrollo de una aplicacin Web solicitada por la Facultad de Educacin conocida como Portafolio. Para lograr esto, se ha elaborado un anlisis de la forma en que se comporta la aplicacin, as como los procesos que la conforman, se han confeccionado diseos de interfaces, bases de datos y procesos. Todo lo anterior con el fin de lograr la implementacin de un software que permita almacenar, manipular y procesar documentos (evidencias) y a la vez crear y editar comentarios por parte de los alumnos y profesores, permitiendo con ello que los profesores puedan revisar, comentar y colaborar en el trabajo realizado por el alumno. Finalmente, despus de todo este proceso se entrega al alumno un sitio completo navegable fuera de lnea generado segn sus propias selecciones de comentarios y evidencias, independiente del servidor Web y de la base de datos.

Portafolio en lnea, Facultad de Educacin

SUMARY

The development of the applications for Web with access to data has had a hug peak during the last years. Laguages sush as the ASP, PHP on behalf of the server, the advance of browsers an the increase of the band width for connections to Internet allow us to generate, day after day more complex applications.

The aim of the following report is to point out the development of a Web application know as Portfolio, which belongs to the Faculty of Education. In order to achieve this, an analysis of the way in which this application behaves has been carried out as well as the processes that shape it. Also, interfaces designs, data bases and processes have been prepared. All these things have been made in order to echieve a software implementation that permits to store, manipulate an process attachment (evidences) and, at the same time, to create and edit coments on behalf of the students and teachers, therefore, allowing teachers to revise comment an collaborations the work done by the student in order to submit the user a complete and navigable site out of connection (off line) which is independent from the Web server and from data base server. All this generated by application of an on-line Portfolio.

Portafolio en lnea, Facultad de Educacin

INTRODUCCION

El rpido avance de las tcnologas de informacin, la posibilidad de estar permanentemente conectado a Internet, y la fcil implementacin de desarrollos de aplicaciones Web con acceso a base de datos ha permitido mltiples avances en todas las reas que antes eran de exclusivo dominio de los lenguajes y entornos de desarrollos de plataforma especfica.

Una de las muchas reas beneficiadas con tales avances es la de Educacin, con aplicaciones como teleconferencias a distancia, la idea de Campus o Universidad virtual y cursos en lnea ayudan da a da a mejorar y potenciar la calidad de la educacin, los contenidos, la organizacin de la informacin y lo ms importante, el conocimiento. Otras herramientas menores pero ampliamente conocidas como foros y chat tambin han permitido ha los educadores aumentar sus conocimientos e intencambiar experiencias gracias a herramientas del tipo colaborativas y de grupo.

En este aspecto, una de las experiencias ms recientes en el rea de Educacin es la de Portafolios en Lnea, un proyecto innovador y nico formulado por la Facultad de Educacin. Innovador, en el sentido de que se desconoce de una aplicacin en Chile para de desarrollo de Portafolios usando las tecnologas de Internet, y nico pues se considera que sera la primera experiencia de este tipo orientada exclusivamente a reemplazar la herramienta de evaluacin inicial docente de portafolio tradicional por una de igual similitud, pero de carcter computacional en lnea.

Portafolio en lnea, Facultad de Educacin

Dado estos antecedentes a considerar, la presente tesis trata el desarrollo de esta aplicacin, es asi que el presente informe est conformado por los siguiente captulos : El captulo I, trata respecto de los antecedentes generales, el entorno en el cual se genera el proyecto de portafolio en lnea, tambin se plantea el desarrollo de software en torno estos antecedentes, por lo que, es necesario ser implementado. En el captulo II se realiza un anlisis de los requerimientos que tendr la aplicacin a desarrollar, para ello se ha hecho utilizacin de conceptos del lenguaje de modelado unificado (UML) en todo lo concerniente a modelos de casos de uso. El captulo III, trata el tema del capitulo II desde un punto de vista ms analtico, revisando a un nivel mas profundo los casos de uso ms relevantes del sistema, para ello se continua haciendo uso de herramientas de UML para los modelos de anlisis. En el captulo IV encontramos los primeros esbozos de cmo ser la aplicacin, se disea el modelo de datos, procesos, y las interfaces, definiendo ya en una manera ms clara el aspecto final del portafolio en lnea Finalmente el capitulo V, trata el tema de la implementacin de los diseos antes mensionados en el captulo IV, se presentan una serie de pantallas construidas que sern parte de la aplicacin final, procesos y cdigo fuente y los requisitos necesarios para que la aplicacin pueda funcionar correctamente.

Portafolio en lnea, Facultad de Educacin

CAPITULO ( I ) ANTECEDENTES Y DESCRIPCION GENERAL DEL PROBLEMA

Portafolio en lnea, Facultad de Educacin

1.1 DESCRIPCION GENERAL

En los ltimos aos en Chile (y respecto especficamente de lo que atae a la formacin de docentes o profesores en las Universidades), la formacin inicial docente se ha caracterizado por una siempre mayor importancia de los procesos de desarrollo de prcticas pedaggicas desde los primeros aos de la carrera Universitaria y que culminan en actividades intensivas de lo que se denomina Internado Pedaggico donde el futuro profesor, con apoyo y supervisin de profesores de la Universidad as como del mismo sistema educacional, se desempea como docente responsable de un curso, en el caso de la carrera de Pedagoga en Educacin Bsica de la Universidad Catlica de Temuco ( UCT ), durante un ao escolar completo.

En el mbito de los procesos de prctica Pedaggica la Facultad de Educacin de la UCT ha participado en el diseo, implementacin y evaluacin de experiencias de evaluacin del docente novato, que se ha caracterizado por la utilizacin Portafolio de un

donde el estudiante en el curso de Internado Pedaggico, recoge

evidencias de su desempeo fundamentando su relevancia en un proceso reflexivo, guiado por una estructura de estndares de desempeo que han sido definido por el Ministerio de Educacin ( MINEDUC ).

Portafolio en lnea, Facultad de Educacin 1.1.1 DEFINICION DE PORTAFOLIO

Un Portafolio definido en el mbito de la Facultad de Educacin es fsicamente un archivador o carpeta, en el cual los alumnos del curso de Internado Pedaggico recopilan y adjuntan informacin relevante denominada Evidencia, esta evidencia puede ser, para el alumno que confecciona un portafolio, un dibujo, una prueba efectuada al curso, un video, una grabacin de audio o cualquier otro medio de informacin que muestre el desempeo del alumno como profesional, el curso y en particular a los objetivos que el alumno lleg o bien desea llegar y mostrar.

El portafolio, adems contiene las reflexiones y comentarios respecto de su desempeo docente y las evidencias recopiladas en el portafolio, estas reflexiones se conocen como Comentarios crticos, tales comentarios se pueden efectuar tanto al conjunto de evidencias, a un grupo de stas o bien a una evidencia en particular.

Evaluaciones de proceso y finales Muestra de los trabajos de los

Portafolio
Evaluacin de desempeo d Filmaciones y registros Facetas del portafolio A, B, C, D, X

Comentarios crticos

Proyectos desarrollados

( Figura 1.1.1 ) Esquema de un portafolio.

Portafolio en lnea, Facultad de Educacin

Un portafolio posee una estructura lgica, que ha sido definido claramente por el Ministerio de Educacin, de esta forma, el portafolio est conformado por Facetas, las facetas del corresponden a las reas principales de accin que son de responsabilidad de cada docente inicial. Las facetas han sido diseadas a partir de estndares nacionales, orientados por principios pedaggicos, estas facetas tambin estn conformados por criterios, dichos criterios son coherentes y especficos para cada faceta.

Portafolio en lnea, Facultad de Educacin

1.2 OBJETIVO GENERAL

El objetivo principal del proyecto puede definirse como el diseo y desarrollo e implementacin de una aplicacin computacional para el Portafolio de la Facultad de Educacin, y en particular el de la carrera de Pedagoga General Bsica.

Portafolio en lnea, Facultad de Educacin

10

1.3 OBJETIVOS ESPECIFICOS

Con el objetivo principal de desarrollar e implementar de una aplicacin de Portafolio se pueden lograr tambin los siguientes objetivos especficos propios para un desarrollo de software :

Anlisis del problema y el entorno, mediante el cual se estableceran los requerimientos y su representacin funcional como casos de uso.

Anlisis del problema mediante el establecimiento de requerimientos a travs del modelo de anlisis.

Diseo de la solucin mediante modelado de datos, diseo visual de las interfaces de usuarios, diseo de procesos mediante diagramas de flujo y diseo de la estructura de almacenamiento de archivos en el servidor.

Implementacin de los diseos definidos previamente, entre ellos, la definicin e implementacin de la base de datos, interfaces, y procesos.

Algunas pruebas realizadas al sistema.

Generacin de documentacin de apoyo al sistema a desarrollar

Portafolio en lnea, Facultad de Educacin

11

CAPITULO ( II ) ANALISIS DE REQUERIMIENTOS

Portafolio en lnea, Facultad de Educacin

12

2.1 Modelos de casos de uso


2.1.1 Definicin de UML

El Lenguaje de Modelado Unificado (UML) es la sucesin de una serie de mtodos de anlisis y diseo orientadas a objetos que aparecen a fines de los aos 80 y principios de los 90s. UML es llamado un lenguaje de modelado, no un mtodo. Los mtodos consisten de ambos de un lenguaje de modelado y de un proceso.

El lenguaje de modelado es la notacin (principalmente grfica) que usan los mtodos para expresar un diseo y tambin, los elementos que conformaran la solucin al desarrollo de software. El proceso indica los pasos que se deben seguir para llegar a un diseo.

La estandarizacin de un lenguaje de modelado es invaluable, ya que es la parte principal del proceso de comunicacin que requieren todos los agentes involucrados en un proyecto informtico. Si se quiere discutir un diseo con alguien ms, ambos deben conocer el lenguaje de modelado y no as el proceso que se sigui para obtenerlo. Una de la metas principales de UML es avanzar en el estado de la integracin institucional proporcionando herramientas de interoperabilidad para el modelado visual de objetos. Sin embargo para lograr un intercambio exitoso de modelos de informacin entre herramientas, se requiri definir a UML una semntica y una notacin.

Portafolio en lnea, Facultad de Educacin 2.1.2 Modelos de Casos de Uso

13

Dentro de las notaciones y diagramas del Lenguaje de Modelado Unificado UML encontramos los Diagramas o modelos de casos de uso, los casos de uso describen el comportamiento del sistema desde el punto de vista del actor.

Un caso de uso describe una funcin proporcionada por el sistema como un conjunto de eventos que producen un resultado visible para los actores, son los actores los encargados de iniciar un caso de uso para acceder a la funcionalidad del sistema. Luego el caso de uso puede iniciar otros casos de uso y recopilar ms informacin de los actores. Cuando los actores y los casos de uso intercambian informacin se dice que estos se comunican, esta comunicacin se denomina relaciones de comunicacin.

Portafolio en lnea, Facultad de Educacin 2.1.3 Notaciones UML para diagramas de casos de uso

14

Actores : Un actor es cualquier entidad que interacta con el sistema, por ejemplo : un usuario, otro sistema.
Actor

(Figura 2.1.3.1) Representacin grfica de un actor.

Casos de uso : Es una operacin/tarea especfica que se realiza tras


Caso de uso

una orden de algn agente externo, sea desde una peticin de un actor o bien desde la invocacin desde otro caso de uso.

(Figura 2.1.3.2) Representacin grfica de un caso de uso.

Relacin Actor Caso de uso : Es el tipo de relacin ms bsica que indica la invocacin desde un actor hacia un caso de uso. Dicha relacin se denota con una flecha simple. Relacin entre casos de uso : es una relacin o vnculo que indica la llamada desde un caso de uso a otro. Podemos agregar tambin que estas relaciones pueden ser de distintos tipos, entre ellas, las siguientes : <incluye> <extiende> : Tipo de relacin generalizada a varios casos de uso. : Son elementos relacionados con flujos alternativos al

flujo normal del casos de uso.

(Figura 2.1.3.3) Representacines de relacines de caso de uso.

Portafolio en lnea, Facultad de Educacin

15

2.2 Modelos de casos de uso


2.2.1 Diagrama de Casos de usos para la autentificacin de usuario

Administrador

Autentificar usuario

Profesor

Usuario

Alumno

(Figura 2.2.1) Diagrama de casos de uso para autentificacin de usuario, ( Las relaciones de los actores con el actor usuario son herencia o generalizacin.)

Este caso de uso se denomina estereotipo, dado que los actores son tres: Administrador, Profesor y alumno, cada uno de ellos accede al caso de uso de autentificacin de usuario, para no especificar en todos los diagramas que los usuarios son autentificados hacemos este tipo de referencia concluyendo que cada uno de ellos es autentificado en el sistema por el caso de uso.

Portafolio en lnea, Facultad de Educacin 2.2.2 Generalizacin y herencia entre los actores Alumno y Profesor

16

Profesor Caso de uso en comn Alumno/Profesor

Alumno

(Figura 2.2.2) Diagrama generalizacin y herencia entre los actores Alumno y Profesor ( Las relaciones de los actores con el actor usuario son herencia o generalizacin.)

Esta generalizacin se ha efectuado pues existen algunos casos de uso en los que, tanto el Alumno como el Profesor comparten acciones similares, de esta forma, la generalizacin y herencia permiten establecer un usuario en comn Alumno/Usuario que llevar a cabo las funciones en comn del Alumno y el Profesor en los casos de uso que as lo necesiten.

Portafolio en lnea, Facultad de Educacin 2.2.3 Diagrama del patrn de Casos de usos para mantencin de tablas
Ir al primer registro <incluye> Ir al registro anterior Navegar por la tabla <incluye> Ir al siguiente registro Agregar registro Mantenedor de tablas Administrador <incluye>

17

<incluye>

<incluye> Ir al ultimo registro

<incluye> Modificar registro <incluye> Eliminar registro

(Figura 2.2.3) Diagrama de casos de uso para autentificacin de usuario.


En este modelo de casos de uso podemos ver que las funciones principales estn orientadas a la mantencin de tablas de sistema, para ello, el mantenedor contiene o incluye una serie de otros casos de uso orientados a satisfacer las necesidades bsicas de una mantencin de tablas, entre ellas encontramos las funciones mas comunes como : agregar, modificar, eliminar y las opciones de navegacin de registro (ir a registro siguiente, anterior, primero o ltimo ). Este patrn de casos de uso esta orientado principalmente a las tareas de Administracin de sistema y se aplica a todas aquellas tablas que requieren de una gestin manual y no son modificables por usuarios comunes.

Portafolio en lnea, Facultad de Educacin 2.2.4 Diagrama de Casos de usos para un Alumno en el Portafolio

18

Crear/Editar comentario a evidencia

Ver evidencia y comentarios <incluye> Almacenar evidencias

Inscripcin alumno en portafolio Alumno

Listar evidencias almacenada

<incluye>

<incluye> <incluye> <incluye> Seleccionar Faceta y/o Criterio <incluye> Eliminar comentario a evidencia <incluye> Eliminar evidencias

Seleccionar curso para el portafolio

<incluye>

Generar Portafolio de producto <incluye> <incluye>

Listar comentarios crticos

<incluye>

Crear/Editar comentarios crticos

<incluye> Generar portafolio offline Eliminar comentarios crticos

Personalizar datos del portafolio

Seleccin de facetas, comentar. y evidencias

(Figura 2.2.4) Diagrama de Casos de usos para un Alumno en el Portafolio.

Portafolio en lnea, Facultad de Educacin

19

Segn la figura (2.2.4), los casos de uso para el alumno se pueden dividir en tres partes, primero todo aquello que tiene que ver con la generacin y edicin de comentarios crticos, la segunda orientada a las evidencias y la tercera esta dirigida a la generacin de un portafolio de producto, que es una seleccin de los mejores comentarios y evidencias pero que el alumno ser capaz de navegar y visualizar fuera de lnea.

Portafolio en lnea, Facultad de Educacin 2.2.5

20

Diagrama de Casos de usos para un Profesor en el Portafolio.

Configurar portafolios de alumnos

Listar cursos del profesor Profesor Listar alumnos del curso <incluye> <incluye>

Visualizar portafolio de producto

<incluye>

Listar comentarios crticos

<incluye>

Seleccionar portafolio a revisar

Listar elementos nuevos

<incluye>

<incluye> Listar evidencias del alumno

Crear/editar comentario a alumno

<incluye>

(Figura 2.2.5) Diagrama de Casos de usos para un Alumno en el Portafolio.

Los casos de uso del profesor estn orientados bsicamente a la configuracin de portafolios para que los alumnos puedan trabajar segn las facetas y criterios que haya estipulado el profesor, y la revisin de los portafolios de los alumnos, en este sentido, el profesor puede intervenir en el trabajo de los alumnos slo aportando comentarios que sern ledos por el alumno, y conforman al portafolio en lnea como una herramienta colaborativa entre el Profesor y el Alumno.

Portafolio en lnea, Facultad de Educacin 2.2.6

21

Diagrama de Casos de usos para el Administrador del Portafolio

Mantencin de rutas de sistema

<incluye> Patrn de mantenedor de carreras Men de administrador Administrador <incluye> Patrn de mantenedor de profesores <incluye>

Patrn de mantenedor de cursos

(Figura 2.2.6) Diagrama de Casos de usos el administrador de sistema.

El administrador como usuario es el encargado de hacer mantencin a algunas tablas de sistema, para ello, cada mantenedor de tablas es un Patrn del caso de uso de mantencin, esto es : Cada mantenedor definido en el caso de uso de la figura (2.2.5) adquiere todas las caractersticas del caso de uso definido en la figura (2.2.2), con ello, cada patrn incluye tambin aquellos casos de uso descritos anteriormente en el patrn de mantencin.

Portafolio en lnea, Facultad de Educacin

22

2.3 DESCRIPCIN EXTENDIDA DE CASOS DE USO PARA EL ALUMNO

A continuacin se presenta la descripcin extendida de los casos de uso, en ella se encuentra la descripcin detallada de cada caso de uso utilizado en los diagramas de caso de uso presentados anteriormente, su funcionamiento y los detalles asociados que sern requerimientos para desarrollar la aplicacin. Los casos de uso del alumno principalmente estn orientados a la confeccin de comentarios y almacenar evidencias en lo que respecta al portafolio de proceso, pero tambin es necesario que el alumno haga una seleccin de sus mejores comentarios y evidencias, y personalizarlos, a esto se le llama Portafolio de producto, la idea es que el alumno al final pueda crear un portafolio navegable off-line que pueda llevar a cualquier parte y presentarlo como sus logros profesionales en el rea de la educacin.

Portafolio en lnea, Facultad de Educacin 2.3.1 Caso de uso : Autentificar usuario CASO DE USO : Descripcin Autentificar usuario

23

El caso de uso de autentificacin de usuario permite validar y comprobar la identidad del cliente dentro del sistema, el caso de uso es un patrn para autentificar a todos los usuarios.

Actores Precondicin 1 Flujo normal

Usuario. El usuario debe establecer una conexin WEB con el sistema para activar este caso de uso. 2.- El usuario solicita elaborar en lnea a lo que el sistema despliega un formulario para que el usuario ingrese su nombre de usuario y contrasea. 3.- El sistema valida en nombre de usuario y su contrasea. 4.- Si los datos del paso 4 son correctos, se comprueba el tipo de usuario ( Administrador, Profesor o Alumno). 5.- Se despliega un mensaje de bienvenida para el usuario y se registra una sesin de usuario para el cliente activo.

Flujo alternativo 1 Flujo alternativo 2

En el paso 5, si los datos no son correctos, el sistema enva un mensaje de error al intentar acceder al sistema. En el caso que el usuario no est registrado en algn curso para trabajar en el portafolio, el usuario puede activar el caso de uso Inscripcin de Alumno que se explica en el caso de uso (2.3.2).

Post Condiciones

El usuario habilitado y validado para hacer uso de su perfil.

(Tabla 2.3.1) Caso de uso : Autentificacin de usuario.

Portafolio en lnea, Facultad de Educacin 2.3.2 Caso de uso : Mantenedor de tablas CASO DE USO : Descripcin Patrn de casos de uso : Mantenedor de tablas

24

Este patrn es un conjunto de casos de uso que puede efectuar todas las operaciones bsicas en una tabla, esto incluye Agregar, Quitar y Modificar registros de la tabla seleccionada, tambin el caso de uso tiene la facultad de permitir al usuario navegar por los registros.

Actores Precondicin 1 Flujo normal

Administrador. El usuario debe estar autentificado como administrador. 1.- El caso de uso se activa seleccionando la tabla a la que desea mantener. 2.- El sistema despliega un formulario con todos los controles asociados campos de la tabla y un conjunto de botones asociados a cada operacin en la tabla. 3.- El Administrador efecta la operacin, en el caso de eliminar, necesita recibir una confirmacin. 4.- En el caso de Modificar o Aadir un registro el usuario necesita pulsar el botn guardar. 5.- En el caso de navegar, el formulario se actualiza automticamente respondiendo a los botones pulsados (primero, siguiente, anterior o ltimo).

Flujo alternativo 1 Post Condiciones

En el Paso 3 y 4 si el Administrador no guarda o elimina, existe un botn para cancelar la operacin seleccionada No hay post condiciones para este caso de uso.

(Tabla 2.3.2) Caso de uso : Inscripcin de Alumno en Portafolio.

Portafolio en lnea, Facultad de Educacin 2.3.3 Caso de uso : Inscripcin de Alumno en Portafolio CASO DE USO : Descripcin Actores Precondicin 1 Flujo normal Inscripcin de Alumno en Portafolio

25

Permite al alumno inscribir sus datos personales en algn curso para que este pueda trabajar en su portafolio en lnea. Alumno. El alumno debe haber activado el caso de uso para autentificacin de usuarios. 1.- El alumno debe registrar correctamente su nmero de RUT. 2.- El sistema despliega una lista de cursos disponibles para inscribirse en el Portafolio. 3.- El alumno selecciona el curso en el que desea inscribirse. 4.- La primera vez que el alumno se inscribe, el alumno debe llenar un formulario con sus datos personales y acadmicos, aqu se ingresa tambin el nombre de usuario y la contrasea de acceso para el alumno. 5.- Los datos son guardados, y se enva un aviso al alumno en el cual quedar a la espera que el profesor active su portafolio.

Flujo alternativo 1

En el paso 4, si el alumno ha inscrito sus datos en otro curso, el formulario es completado automticamente por el sistema con los datos del alumno.

Flujo alternativo 2

En el pasos 4, si el nombre de usuario (en el sistema) est registrado por otro alumno, el sistema enva un mensaje de error.

Post Condiciones

No hay post condiciones para este caso de uso.

(Tabla 2.3.3) Caso de uso : Inscripcin de alumno en portafolio.

Portafolio en lnea, Facultad de Educacin 2.3.4 Caso de uso : Seleccionar curso para el portafolio CASO DE USO : Descripcin Seleccionar curso para el portafolio

26

Permite al usuario seleccionar el curso con el cual desea trabajar con su portafolio, en el caso del profesor, permite seleccionar la lista del curso y los alumnos para revisar su portafolio.

Actores Precondicin 1 Flujo normal

Alumno/Profesor. El alumno debe haber sido autentificado previamente por el sistema. 1.- Una vez autentificado el Alumno/Profesor, se habilitan las opciones correspondientes a su perfil, dentro de estas opciones, aparece el nombre del usuario (en el sistema) y al lado una lista desplegable con los cursos configurados para su uso, esta lista siempre est disponible para que el Alumno cambie a su voluntad de curso en el cual est trabajando. 2.Se muestran las facetas que estn habilitadas o deshabilitadas segn la configuracin establecida para el Alumno/Profesor.

Flujo alternativo 1 Post Condiciones

No existe un flujo alternativo. No existen post condiciones para este caso de uso

(Tabla 2.3.4) Caso de uso : Seleccin de curso para el portafolio.

Portafolio en lnea, Facultad de Educacin 2.3.5 Caso de uso : Seleccin de Facetas y/o Criterios CASO DE USO : Descripcin Seleccin de Facetas y/o Criterios

27

La seleccin de facetas y criterios del portafolio permite al Alumno/Profesor crear, editar, eliminar comentarios crticos a facetas y criterios, adems, la seleccin de criterios permite catalogar de mejor manera las evidencias que el alumno almacenar en su portafolio. Tambin el caso de uso permite revisar o visualizar los comentarios y evidencias en cada una de las facetas o criterios del portafolio.

Actores Precondicin 1 Flujo normal

Alumno/Profesor El Alumno/Profesor debe haber seleccionado un curso previamente. 1.- El Alumno/Profesor selecciona una de las Facetas del portafolio y muestra una descripcin correspondiente a cada una de ellas. 2.- Tambin se muestra un vnculo para poder crear o editar un comentario crtico a la faceta. 3.- El sistema muestra tambin los criterios configurados para el alumno.

Flujo alternativo 1

Para seleccionar alguno de los criterios, primero debe seleccionar una de las facetas configuradas en el portafolio del alumno. Al seleccionar un criterio, se puede llamar al caso de uso : Listar comentarios crticos correspondiente al criterio.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.3.5) Caso de uso : Seleccin de facetas y/o criterios.

Portafolio en lnea, Facultad de Educacin 2.3.6 Caso de uso : Listar comentarios crticos CASO DE USO : Descripcin Listar comentarios crticos

28

Este caso de uso, permite visualizar por pantalla todos los comentarios crticos efectuados a un determinado criterio, esta lista de comentarios posee hipervnculos para activar los casos de uso Crear/Editar comentarios crticos y Eliminar comentarios crticos.

Actores Precondicin 1 Flujo normal

Alumno/Profesor El Alumno/Profesor debe haber seleccionado algn criterio perteneciente a una de las Facetas del portafolio 1.- El Alumno/Profesor selecciona uno de los criterios para los que necesita listar los comentarios 2.- El Alumno/Profesor despliega la lista hipervinculada con los ttulos de los comentarios crticos creados, la fecha y hora en la cual fue creado el comentario. 3.- Si el Alumno/Profesor pincha sobre el nombre o ttulo del comentario, esto provoca una llamada al caso de uso Editar comentario.

Flujo alternativo 1

En el caso del profesor, este solo puede efectuar comentarios propios que no afectaran el contenido del comentario del alumno, es decir, son sugerencias o crticas ya sean positivas o negativas a las reflexiones efectuadas por el alumno.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.3.6) Caso de uso : Listar comentarios crticos.

Portafolio en lnea, Facultad de Educacin 2.3.7 Caso de uso : Crear/Editar comentarios crticos CASO DE USO : Descripcin Actores Precondicin 1 Flujo normal Crear/Editar comentarios crticos

29

Este caso de uso permite crear o editar un nuevo comentario a una faceta o criterio. Alumno. El alumno debe haber seleccionado una faceta o criterio. 1.- El alumno al seleccionar la faceta escribir un comentario. 2.- Si el comentario es nuevo, se despliega un formulario en blanco con los datos para el ttulo de comentario y un cuadro de texto enriquecido para editar su comentario. 3.- Si el comentario seleccionado se va a editar o modificar, ste es cargado en el cuadro de edicin para que el alumno corrija o contine con sus modificaciones. 4.- El alumno pulsa el botn guardar y despliega el comentario que ha escrito el alumno y un botn para volver a la faceta en la cual estaba trabajando. para la cual necesita

Flujo alternativo 1 Flujo alternativo 2

En el caso de los criterios, el alumno debe seleccionar los botones crear o editar comentario respectivamente. En el caso de no escribir un ttulo para el comentario, el usuario recibe una respuesta que le avisa que es un requisito necesario para el comentario editado o creado.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.3.7) Caso de uso : Crear o editar comentarios crticos.

Portafolio en lnea, Facultad de Educacin 2.3.8 Caso de uso : Eliminar comentario crtico CASO DE USO : Descripcin Eliminar comentario crtico

30

Este caso de uso permite eliminar uno o ms comentarios crticos del portafolio del alumno, esto se inicia por medio del caso de uso Listar comentarios.

Actores Precondicin 1 Flujo normal

Alumno. El alumno debe seleccionar al menos un comentario. 1.- El alumno activa el caso de uso Listar comentarios. 2.- Selecciona l o los comentarios a eliminar mediante casillas de seleccin dispuestas al lado de cada ttulo de comentario, y pulsa eliminar en el botn preparado para este caso de uso. 3.- Antes de eliminar los comentarios seleccionados, se pide una confirmacin de los comentarios seleccionado para borrar. 4.- Los comentarios son quitados de la base de datos.

Flujo alternativo 1

En el paso 3, el alumno puede cancelar el proceso de eliminacin de comentario, dejando todos los comentarios seleccionados sin ser eliminados.

Flujo alternativo 2

Al pretender borrar sin seleccionar ningn comentario crtico, el sistema enva un mensaje de error avisando que para eliminar comentarios es necesario marcar al menos uno para ser eliminado.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.3.8) Caso de uso : Eliminar comentario crtico.

Portafolio en lnea, Facultad de Educacin 2.3.9 Caso de uso : Listar evidencias CASO DE USO : Descripcin Listar evidencias

31

Este caso de uso lista las evidencias del alumno para un determinado criterio dentro de una faceta, este listado sin embargo llama o invoca tambin a otros casos de usos, asociados con las evidencias, el objetivo principal es listar las evidencias para ser visualizadas o procesadas.

Actores Precondicin 1 Flujo normal

Alumno/Profesor El usuario debe haber seleccionado previamente un criterio dentro de una determinada faceta. 1.- Al seleccionar el criterio, se de despliega un formulario con la lista de las evidencias de este. 2.- El listado contiene vnculos para mostrar o eliminar los comentarios escritos por el alumno en alguna evidencia. 3.- Tambin permite quitar una o ms evidencias asociadas al criterio/faceta. 4.- Es posible visualizar las evidencias y los comentarios del Alumno/Profesor (en el caso de que estos existan) haciendo click en el nombre del archivo o evidencia.

Flujo alternativo 1 Post Condiciones

No hay flujo alternativa para este caso de uso. No existen post condiciones para este caso de uso.

(Tabla 2.3.9) Caso de uso : Listar evidencias.

Portafolio en lnea, Facultad de Educacin 2.3.10 Caso de uso : Almacenar evidencias Almacenar evidencias

32

CASO DE USO : Descripcin

Este caso de uso permite al alumno almacenar tanto en la base de datos del sistema, como en el servidor, la evidencia o archivo que el alumno necesita guardar en su portafolio.

Actores Precondicin 1 Flujo normal

Alumno El alumno debe haber seleccionado previamente una faceta y un criterio. 1.- El alumno selecciona un criterio para almacenar sus evidencias. 2.- Junto con activar el caso de uso Listar evidencias, se despliega un cuadro de dialogo para subir archivos y un cuadro de texto para escribir una breve descripcin respecto de la evidencia a almacenar. 3.- El alumno selecciona un documento haciendo click en el botn Examinar. 4.- Una vez seleccionado el documento y escrita la descripcin (esta ultima es opcional), pulsa el botn Agregar, el cual registra en la base de datos el documento, la descripcin, la fecha y los datos referentes al usuario, faceta y criterio, para su portafolio. El archivo fsicamente es almacenado en una estructura de directorio preparada previamente para el alumno. 5.- Esto actualiza automticamente el caso de uso Listar evidencias y se enva un mensaje en el cual la evidencia ha sido almacenada satisfactoriamente.

Portafolio en lnea, Facultad de Educacin

33

Flujo alternativo 1

En el paso 3, si el alumno selecciona una evidencia o archivo con acentos, , o caracteres extendidos como apstrofes, llaves o smbolos no alfabticos o numricos, el caso de uso enva un mensaje solicitando cambiar el nombre de la evidencia, esto es porque al solicitar el documento va Web, las referencias a este pueden perderse, perdiendo el documento.

Flujo alternativo 2

En el paso 4, si el alumno no selecciona ningn documento e intenta guardar un documento, se enva un mensaje de error pues debe seleccionar un archivo o evidencia para ser almacenada.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.3.10) Caso de uso : almacenar evidencias.

Portafolio en lnea, Facultad de Educacin 2.3.11 Caso de uso : Ver evidencia y comentarios Ver evidencia y comentarios

34

CASO DE USO : Descripcin

Permite al alumno o profesor visualizar la evidencia almacenada por el profesor y tambin los comentarios efectuados tanto por el alumno como del profesor.

Actores Precondicin 1

Alumno/Profesor El Alumno/Profesor debe haber seleccionado una faceta y un criterio. El caso de uso se activa por el caso de uso Listar evidencias, este posee vnculos que activan la visualizacin de evidencias.

Flujo normal

1.- El usuario selecciona la evidencia haciendo click en el nombre de ella. 2.- Esto despliega una nueva ventana dividida en 3 paneles o frames, uno para mostrar el comentario del alumno, el segundo para mostrar el comentario del profesor y el tercer frame despliega la evidencia propiamente tal.

Flujo alternativo 1

En el caso del usuario profesor, tambin es posible ver las evidencias nuevas o las que el profesor no ha revisado todava en un listado preparado especialmente para ello.

Flujo alternativo 2 Post Condiciones

Segn el actor, se les permite activar el caso de uso Crear/Editar comentario a evidencia. No existen post condiciones para este caso de uso.

(Tabla 2.3.11) Caso de uso : Ver evidencia y comentario.

Portafolio en lnea, Facultad de Educacin 2.3.12 Caso de uso : Crear/Editar comentario a evidencia Crear/Editar comentario a evidencia

35

CASO DE USO : Descripcin Actores Precondicin 1 Flujo normal

Este caso de uso permite crear o modificar un comentario o reflexin efectuada a alguna evidencia en particular. Alumno/Profesor El Alumno/Profesor debe haber activado el caso de uso Ver evidencias y comentarios. 1.- El Alumno/Profesor visualiza la evidencia por medio del caso de uso Ver evidencias y comentarios. 2.- El sistema en el caso de uso anterior despliega un cuadro de edicin de texto enriquecido para que el Alumno/Profesor puedan crear o editar su comentario a la evidencia. 3.- Una vez editado y formateado el texto, el Alumno/Profesor selecciona Guardar el comentario. 4.- Como mtodo de confirmacin al guardar el comentario es mostrado como una pgina HTML normal en la cual es posible leer totalmente el texto. 5.- El Alumno/Profesor finaliza el caso de uso, mediante el botn Volver, el cual vuelve a la lista de evidencias.

Flujo alternativo 1

El alumno puede cancelar la edicin en cualquier momento pulsando en el botn Cerrar que hace que el sistema cierre la ventana que visualiza los comentarios y la evidencia.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.3.12) Caso de uso : Crear/Editar comentario a evidencia.

Portafolio en lnea, Facultad de Educacin 2.3.13 Caso de uso : Eliminar comentario a evidencia Eliminar comentario a evidencia

36

CASO DE USO : Descripcin Actores Precondicin 1 Flujo normal

Permite al alumno eliminar un comentario formulado a una evidencia en particular. Alumno. El alumno debe activar el caso de uso Listar evidencias 1.- El alumno lista las evidencias de alguno de los criterios. 2.- Cuando existe algn comentario a una evidencia, el listado crea un icono sealando que existe un comentario. 3.- Al hacer click en este icono, el sistema automticamente despliega el comentario para una lectura rpida y tambin un vnculo para eliminar el comentario. 4.- El alumno selecciona eliminar el comentario, y recibe un cuadro de dialogo para confirmar la eliminacin del comentario. 5.- El comentario es eliminado y el caso de uso Listar evidencias es actualizado automticamente.

Flujo alternativo 1 Post Condiciones

En el paso 4, el alumno puede cancelar la eliminacin del comentario, al confirmar la eliminacin. No existen post condiciones para este caso de uso.

(Tabla 2.3.13) Caso de uso : Eliminar comentario a evidencia.

Portafolio en lnea, Facultad de Educacin 2.3.14 Caso de uso : Eliminar evidencias Eliminar evidencias

37

CASO DE USO : Descripcin Actores Precondicin 1 Flujo normal

Este caso de uso permite al alumno eliminar o quitar una evidencia de su portafolio. Alumno. El alumno debe activar el caso de uso Listar evidencias. 1.- El alumno lista las evidencias que a almacenado en algn criterio. 2.- En el listado, estn dispuestas casillas de seleccin para marcar o desmarcar las evidencias a eliminar. 3.- Una vez que el alumno selecciona las evidencias a eliminar, pulsa en el botn Borrar seleccionadas, esto hace que el sistema despliegue una lista nueva, pero solo con las evidencias que se eliminarn y se solicita una confirmacin para quitar esas evidencias. 4.- Las evidencias son eliminadas, y el caso de uso Listar evidencias es actualizado.

Flujo alternativo 1

En el paso 3, en el momento de confirmar el borrado de las evidencias, el proceso puede ser cancelado, mediante un botn dispuesto para ello.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.3.14) Caso de uso : Eliminar evidencias.

Portafolio en lnea, Facultad de Educacin 2.3.15 Caso de uso : Generar portafolio de producto Generar portafolio de producto

38

CASO DE USO : Descripcin

Este caso de uso es un men de casos de uso que permite al alumno generar un portafolio navegable fuera de lnea, en el cual el alumno selecciona los mejores comentarios y evidencias que ha recopilado durante su proceso.

Actores Precondicin 1

Alumno. Ninguna, el alumno en cualquier momento ir generando su portafolio de producto, todos los portafolios creados tienen habilitada la opcin de portafolio de producto.

Flujo normal

1.- El alumno selecciona la opcin de Producto. 2.- Se despliega un men con las opciones necesarias para configurar el portafolio de producto : Datos de la institucin y portafolio Seleccionar facetas Seleccionar comentarios Seleccionar evidencias Generar portafolio de producto

Flujo alternativo 1

Ninguno, este caso de uso se presenta como un men de opciones que invoca a otros casos de uso.

(Tabla 2.3.15) Caso de uso : Generar portafolio de producto.

Portafolio en lnea, Facultad de Educacin 2.3.16 Caso de uso : Personalizar datos del portafolio. Personalizar datos del portafolio

39

CASO DE USO : Descripcin

Permite al alumno establecer y guardar informacin respecto a los datos de la institucin, escuela o colegio donde se desempe, tambin es posible establecer ttulos y subttulos, almacenar imgenes para personalizar el portafolio de producto.

Actores Precondicin 1 Flujo normal

Alumno. El alumno debe estar previamente autentificado en el sistema. Desde el caso de uso Generar portafolio de producto, se llama a este caso de uso, 1.- El alumno llena un formulario que permite guardar datos de la organizacin en la que se desempea, escribir una descripcin de ella, e inclusive una imagen, tambin puede almacenar los datos del curso, y los profesores que estuvieron junto al alumno en el proceso. 2.- El alumno puede almacenar imgenes seleccionando los botones Examinar dispuestos para ello. 3.- El caso de uso finaliza cuando el alumno guarda los datos mediante el botn Guardar dispuesto para ello.

Flujo alternativo 1

El alumno puede modificar los datos almacenados invocando al caso de uso, los cambios son guardados mediante el botn Guardar

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.3.16) Caso de uso : personalizar datos del portafolio de producto.

Portafolio en lnea, Facultad de Educacin 2.3.17 Caso de uso : Seleccionar Facetas, comentarios y evidencias Seleccionar Facetas, comentarios y evidencias

40

CASO DE USO : Descripcin

Permite al alumno seleccionar las facetas que incluir en su portafolio de producto, los comentarios crticos que necesitar y las evidencias almacenadas en el portafolio de proceso.

Actores Precondicin 1 Flujo normal

Alumno El alumno debe haber llenado los datos bsicos de su portafolio de producto (el caso de uso Personalizar datos del portafolio). 1.- El alumno selecciona las facetas que necesitar incluir en su portafolio mediante casillas de verificacin, puede tambin incluir una imagen y un titulo de forma opcional a cada faceta. 2.- En el caso de los comentarios, estos estn listados por facetas y criterios, de igual forma se seleccionan mediante casillas, y es posible agregar una imagen opcional para complementar aun mas el comentario. 3.- Para las evidencias, ellas estn dispuestas por facetas, y agrupadas por criterios, en este caso solo se seleccionan mediante casillas de verificacin. 4.- Una vez seleccionadas, ya sean facetas, comentarios o evidencias, el alumno hace click en el botn Aceptar, esto guardar los datos seleccionados.

Flujo alternativo 1

En el caso que el alumno desee modificar o quitar alguno de los datos seleccionados, o necesite agregar algo, solo debe seleccionar el caso de uso, los datos guardados previamente son visualizados median casillas de verificacin activadas.

Portafolio en lnea, Facultad de Educacin Flujo alternativo 2

41

En el caso que el alumno necesite quitar una imagen, ya sea para una faceta o comentario, debe dejar el cuadro de texto en blanco y marcar la casilla para que la imagen guardada sea eliminada de la base de datos.

Flujo alternativo 3

Es tambin posible visualizar el contenido de los comentarios haciendo click en el titulo del comentario. Para visualizar mas informacin respecto de las evidencias a incluir, es necesario hacer click en el nombre de la misma.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.3.17) Caso de uso : Seleccionar Facetas, comentarios y evidencias.

Portafolio en lnea, Facultad de Educacin 2.3.18 Caso de uso : Generar Portafolio off-line Generar Portafolio off-line

42

CASO DE USO : Descripcin

Este caso de uso permite generar un archivo .ZIP que contiene toda la informacin seleccionada para el portafolio de producto en formato HTML para que el alumno pueda navegar el portafolio de producto sin tener que estar conectado a Internet, la idea, tambin es que este archivo pueda ser grabado en un CD-ROM para ser visualizado con mayor portabilidad.

Actores Precondicin 1

Alumno. El alumno debe estar desarrollando su portafolio de producto y debe haber llenado los datos bsicos de su portafolio de producto, estos se encuentran en el caso de uso Personalizar datos del portafolio.

Flujo normal

1.- El alumno activa el caso de uso mediante el caso de uso Generar portafolio de producto, el sistema despliega una ventana informando que se iniciar el proceso que recopila la informacin almacenada para crear el portafolio de producto. 2.- Al hacer click en el link que activa el caso de uso, el sistema comienza a buscar en la base de datos la informacin requerida, y comienza a generar pginas estticas HTML, estas pginas se componen de fragmentos de la base de datos y tambin de enlaces a archivos (evidencias) que se encuentran en el servidor de la aplicacin. 3.- Una vez terminado el proceso de creacin de documentos HTML, se comienza a comprimir con formato ZIP la carpeta

Flujo normal

donde son almacenados todos los documentos generados. 4.- Cuando el proceso de compresin termina, se debe generar una pgina dinmica que iniciar el proceso de descarga automtica en 10 segundos despus de ser visualizado el mensaje.

Portafolio en lnea, Facultad de Educacin

43

5.- El alumno acepta y guarda el archivo ZIP generado, este documento se puede descomprimir utilizando cualquier descompresor para dicho formato. Flujo alternativo 1 Post Condiciones En el caso de ocurrir un error, el formulario de descarga muestra un informe de los errores generados. El alumno debe descargar el documento ZIP y bajarlo a su computador, debe tambin contar con una utilidad para descomprimir archivos con este formato ( WinZip, etc.)

(Tabla 2.3.18) Caso de uso : Generar portafolio off-line.

Portafolio en lnea, Facultad de Educacin

44

2.4 DESCRIPCIN EXTENDIDA DE CASOS DE USO PARA EL PROFESOR

Los casos de uso para el profesor, estn orientados principalmente a la revisin del trabajo del alumno en su portafolio de procesos, para ello, se ha requerido que el profesor pueda examinar los contenidos de los portafolios de los alumnos, ya sean estas evidencias y comentarios creados por el alumno, adems se ha solicitado que el profesor pueda visualizar los elementos nuevos no revisados por l, de esta forma el profesor sabe que es lo que ha revisado y que es lo que le falta por revisar.

Uno de los puntos a considerar es el que los profesores no pueden alterar los comentarios crticos efectuados por el alumno, ya sean estos a evidencias, criterios o facetas, sin embargo en su lugar, el profesor puede crear sus propios comentarios al trabajo del alumno, y el alumno asi revisar que es lo que el profesor sugiere para mejorar el desempeo del alumno. En este aspecto, el portafolio pasa a ser tambin una herramienta colaborativa entre el Alumno y el Profesor.

Portafolio en lnea, Facultad de Educacin 2.4.1 Caso de uso : Listar cursos CASO DE USO : Descripcin Listar cursos

45

Permite al profesor mostrar la lista de cursos asignados para poder configurar los portafolios de los alumnos y tambin listar los alumnos de cada curso para as revisar sus portafolios

Actores Precondicin 1 Flujo normal

Profesor. El Profesor debe previamente haber sido autentificado por el sistema. 1.- El Profesor es validado en el sistema, automticamente, se le presenta la lista de los cursos asignados a l. 2.- La lista posee 2 vnculos, el primero, representado por un icono, permite configurar los portafolios de los alumnos del curso seleccionado, el segundo, se encuentra en la sigla del curso, este link permite listar los alumnos del curso pero para revisar sus comentarios y evidencias almacenadas en sus respectivos portafolios.

Flujo alternativo 1

El profesor, tambin puede acceder a la lista de los cursos, pero solo para revisar los portafolios, mediante una lista desplegable que se encuentra permanentemente visible y luego pulsando el botn Ver.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.4.1 ) Caso de uso : Listar cursos.

Portafolio en lnea, Facultad de Educacin 2.4.2 Caso de uso : Configurar portafolios CASO DE USO : Descripcin Actores Precondicin 1 Flujo normal Configurar portafolios

46

Este caso de uso permite establecer cuales sern las facetas y criterios con los cuales el alumno podr trabajar. Profesor. El profesor debe haber seleccionado algn curso. 1.- En la lista de cursos asignados al profesor, este pincha en el icono previsto para este caso de uso. 2.- Se despliega una lista del curso con los alumnos inscritos para trabajar en el portafolio, al lado de cada nombre se encuentra botn para personalizar el portafolio del alumno seleccionado. 3.- Una vez seleccionado el portafolio a configurar, se despliegan todas las opciones disponibles para facetas y criterios, la configuracin se realiza mediante la habilitacin de casillas de seleccin. 4.- Una vez seleccionados los elementos u opciones que utilizar el alumno, se guardan los datos y se vuelve al listado de alumnos para seguir con otro alumno.

Flujo alternativo 1

El profesor puede terminar la configuracin en cualquier momento, sin guardar los cambios efectuados cuando pulse en el botn Volver o cambiando de curso en la lista desplegable con los cursos asociados al profesor.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.4.2) Caso de uso : Configurar portafolios.

Portafolio en lnea, Facultad de Educacin 2.4.3 Caso de uso : Listar alumnos del curso CASO DE USO : Descripcin Actores Precondicin 1 Flujo normal Listar alumnos del curso

47

Permite mostrar un listado del curso para que el profesor pueda revisar o configurar los portafolios de cada uno de ellos. Profesor. El profesor selecciona el curso haciendo click en el cdigo del curso. 1.- Una vez seleccionado el curso, el sistema despliega la lista del curso, la lista del curso contiene vnculos para facilitar el acceso a visualizar y comentar los portafolios de cada uno de los alumnos del curso

Flujo alternativo 1 Post Condiciones

No hay flujo alternativo. No existen post condiciones para este caso de uso.

(Tabla 2.4.3) Caso de uso : Listar alumnos del curso.

Portafolio en lnea, Facultad de Educacin 2.4.4 Caso de uso : Listar elementos nuevos CASO DE USO : Descripcin Listar elementos nuevos

48

Permite visualizar todos los comentarios y evidencias que han sido creados por el alumno recientemente, este listado se encuentra ordenado y agrupado por facetas y criterios.

Actores Precondicin 1 Flujo normal

Profesor. El profesor debe haber seleccionado un alumno del caso de uso Listar alumnos del curso 1.- Una vez que el profesor decide revisar el portafolio del alumno, este caso de uso es activado automticamente para que el profesor que revisa, vea principalmente cuales son las nuevas evidencias y comentarios creados por el alumno. 2.- El listado cuenta con vnculos para visualizar tanto los comentarios como las evidencias nuevas. 3.- Si el profesor decide ver alguna evidencia o comentario, este listado es actualizado y en la siguiente oportunidad no aparece como un elemento nuevo.

Flujo alternativo 1 Post Condiciones

No hay flujo alternativo, el listado es actualizado cada sesin del profesor. No existen post condiciones para este caso de uso.

(Tabla 2.4.4 ) Caso de uso : Listar elementos nuevos.

Portafolio en lnea, Facultad de Educacin 2.4.5 Caso de uso : Listar comentarios crticos CASO DE USO : Descripcin Actores Precondicin 1 Flujo normal Listar comentarios crticos

49

Permite al profesor listar los comentarios crticos de un criterio. Profesor. El profesor debe haber seleccionado una faceta del portafolio. 1.- El profesor selecciona una faceta a revisar. 2.- Se despliega un listado de los comentarios creados por el alumno, dichos comentarios se encuentran vinculados o permiten activar el caso de uso Crear/Editar comentario para el alumno.

Flujo alternativo 1 Post Condiciones

No hay flujo alternativo. No existen post condiciones para este caso de uso.

(Tabla 2.4.5) Caso de uso : Listar comentarios crticos.

Portafolio en lnea, Facultad de Educacin 2.4.6 Caso de uso : Crear/Editar comentario para el alumno CASO DE USO : Descripcin Crear/Editar comentario para el alumno

50

Este caso de uso permite al profesor crear un comentario personal respecto de un comentario crtico creado por el alumno, este caso de uso es de gran importancia, pues establece los parmetros para el portafolio como una herramienta colaborativa en la cual el alumno es beneficiado por los conocimientos y aportes del profesor a su trabajo.

Actores Precondicin 1 Flujo normal

Profesor. El profesor debe haber seleccionado alguno de los comentarios del alumno para ser revisados, ledos o corregido. 1.- El profesor selecciona en el caso de uso Listar comentarios crticos el que desea leer y comentar mediante un hipervinculo en el ttulo de cada comentario del listado. 2.- El sistema despliega una ventana emergente con el comentario del alumno y un cuadro de edicin de texto enriquecido para que el profesor pueda escribir respecto lo que ha realizado el alumno. 3.- Una vez escrito el comentario, el profesor guarda su aporte mediante el botn Guardar. 4.- Una vez guardado el comentario del profesor, es mostrado solo para visualizacin. 5.- El caso de uso finaliza cuando el profesor cierra la ventana ya sea con el botn cerrar o por el mtodo natural.

Flujo alternativo 1

En el paso 1, puede acceder a Crear o editar comentarios del profesor al alumno mediante el caso de uso Listar elementos nuevos.

Post Condiciones

No existen post condiciones para este caso de uso.

(Tabla 2.4.6) Caso de uso : Crear/Editar comentario para el alumno.

Portafolio en lnea, Facultad de Educacin 2.4.7 Caso de uso : Listar evidencias del alumno CASO DE USO : Descripcin Actores Precondicin 1 Flujo normal Listar evidencias del alumno Permite al profesor listar las evidencias de un criterio. Profesor.

51

El profesor selecciona una faceta y posteriormente el criterio a revisar.. 1.- El sistema despliega un listado con las evidencias creadas por el alumno, las evidencias estn vinculadas al caso de uso permiten activar el caso de uso Crear/Editar comentario para evidencia.

Flujo alternativo 1 Post Condiciones

No hay flujo alternativo. No existen post condiciones para este caso de uso.

(Tabla 2.4.7) Caso de uso : Listar alumnos del curso.

Portafolio en lnea, Facultad de Educacin 2.4.8 Caso de uso : Crear/Editar comentario para evidencia CASO DE USO : Descripcin Actores Precondicin 1 Crear/Editar comentario para evidencia

52

Este caso de uso permite al profesor crear o modificar un comentario a una evidencia almacenada por el alumno. Profesor. El profesor debe haber seleccionado una faceta y un criterio del portafolio de alumno. El profesor invoca el caso de uso Listar evidencias del alumno.

Flujo normal

1.- Cuando el profesor selecciona la evidencia a revisar, el sistema despliega una ventana dividida en tres paneles, para visualizar la evidencia, y los comentarios (alumno y profesor). 2.- El profesor escribe su comentario respecto de la evidencia del alumno y su comentario. 3.- El profesor guarda los datos por medio de un botn guardar dispuesto para tal efecto. 4.- El comentario del profesor es visualizado como texto de solo lectura y se avisa que fue guardado correctamente. 5.- El caso de uso finaliza cuando el profesor cierra la ventana, ya sea por medio del botn cerrar o los controles de la ventana para visualizar la evidencia.

Flujo alternativo 1 Post Condiciones

En el paso 3, el profesor puede cancelar la edicin cerrando la ventana. No existen post condiciones para este caso de uso.

(Tabla 2.4.8) Caso de uso : Listar alumnos del curso.

Portafolio en lnea, Facultad de Educacin

53

2.5 REQUERIMIENTOS FUNCIONALES

Dados los casos de uso, anteriormente descritos, los requerimientos funcionales del sistema para el portafolio en lnea son los siguientes :

2.5.1 Para el alumno : Autentificacin de alumno Inscripcin de alumnos en portafolio Seleccionar curso para el portafolio Seleccin de facetas y/o criterios Listar comentarios crticos Crear y/o editar comentarios crticos Eliminar comentarios crticos Almacenar evidencias Crear y/o editar comentarios a evidencias Ver evidencias y comentarios Eliminar evidencias Eliminar comentarios a evidencias

Portafolio en lnea, Facultad de Educacin 2.5.2 Para el profesor : Autentificacin del profesor Listar cursos asignados al profesor Configurar portafolios de alumnos Listar alumnos del curso Seleccionar portafolio a revisar Listar elementos nuevos Listar evidencias del alumno Crear y/o editar comentarios a evidencias del alumno Listar comentarios crticos del alumno Crear y/o editar comentarios a comentarios del alumno

54

2.5.3 Para el administrador : Autentificacin del administrador Listar men de administracin Mantencin de rutas de sistema Mantencin de carreras Mantencin de cursos Mantencin de profesores

Portafolio en lnea, Facultad de Educacin

55

2.6 REQUERIMIENTOS OPERACIONALES

2.6.1 REQUERIMIENTOS DE SOFTWARE

Conectividad Es necesario que la aplicacin a desarrollar permita a los usuarios estar permanentemente conectados a ellas o tenga buena disponibilidad de horas de conexin y tambin sea independiente del lugar desde el cual el cliente est conectado. En ste mbito es necesario considerar que la aplicacin de Portafolio debe funcionar bajo la plataforma Internet, que es mundialmente accesada por millones de persona, es esta plataforma la que otorga a la aplicacin la mejor conectividad a los usuarios.

Portafolio en lnea, Facultad de Educacin 2.6.2 REQUERIMIENTOS DE HARDWARE

56

Hardware Una de las caractersticas de la confeccin de un portafolio es que es imperativo tener evidencias de los logros del alumno como futuro profesional, desde esta premisa, es como el alumno se ve en la necesidad de tener que fotografiar y en algunos casos realizar filmaciones de clases en las cuales se muestra como l y sus alumnos cumplen con esos objetivos. Desde el punto de vista del funcionamiento adecuado y expedito para el alumno el sistema debe ser capaz de administrar o manipular distintos tipos de documentos o archivos, entre los que se encuentran secuencias de audio y video digitalizados, imgenes, presentaciones Power Point, documentos Word, planillas de clculo, por mensionar algunos de los elementos que conforman las evidencias del portafolio, en este sentido, los formatos sugeridos para video son MPEG y Real Media (RM de Real Player) , estos formatos utilizan un mtodo de compresin que en gran medida ayudarn a la aplicacin en lanzar o mostrar de forma ms rpida las evidencias flmicas, en las imgenes lo deseable es el estndar JPEG altamente aceptado por los navegadores y la mayora de las aplicaciones diseadas para Internet.

Portafolio en lnea, Facultad de Educacin 2.6.3 REQUERIMIENTOS DE INTERFAZ Y DISEO

57

Diseo Otro de los puntos a considerar para el desarrollo de la aplicacin es que sta debe asimilar en la mejor forma posible a un portafolio fsico (como archivador), la interfaz del cliente necesita ser fcil de usar y colorida, dado a que los alumnos que trabajaran con ella cuentan slo con conocimientos a nivel de usuario en el rea computacional, un buen diseo facilitara la curva de aprendizaje del software a desarrollar por parte de los clientes y dar un aspecto agradable de trabajo a los usuarios, para ello se han considerado los siguientes aspectos :

2.6.3.1

Interfaz amigable, que simule o parezca un portafolio

Como la gran mayora de los alumnos son estudiantes de la carrera de Pedagoga General Bsica, cuentan con conocimientos bsicos a nivel usuario en el manejo de aplicaciones computacionales, entre ellas Microsoft Word, Power Point e Internet Explorer, es por ello, que el sistema requiere de una interfaz amigable, colorida y fcil de utilizar, esto ayudar a aquellos usuarios poco experimentados tener una curva relativamente rpida en cuanto a aprender el uso de la aplicacin de portafolio en lnea.

Portafolio en lnea, Facultad de Educacin 2.6.3.2

58

Que frecuentemente informe al usuario respecto de la faceta o

criterio en la cual va a trabajar.

Dado el punto anterior, es necesario fortalecer la interfaz de usuario con documentacin y ayuda asociada al portafolio, para ello, se dispondrn ejemplos de Facetas y criterios, definiciones y textos que ayudarn a catalogar de mejor forma las evidencias a almacenar como los comentarios crticos. Otro punto a considerar es que el alumno tendr siempre a su disposicin un documento creado por el MINEDUC en el cual se describe informacin relacionada al portafolio en formato PDF y un enlace a ayuda en lnea que le permitir al alumno fortalecer an ms sus conocimientos respecto del portafolio.

2.6.3.3

La edicin de los comentarios crticos debe ser amigable, que

permita dar formato a textos para potenciar la edicin.

Otro requerimiento solicitado por los profesores encargados del proyecto es que la edicin de texto sea con formato, es decir, que el usuario pueda escribir con atributos, tanto de color de texto como fondo, tamaos de texto, tipos de fuente, numeracin y vietas, y otras caractersticas propias de un editor normal de texto.

Portafolio en lnea, Facultad de Educacin 2.6.4 REQUERIMIENTOS DE TIEMPOS DE RESPUESTA

59

En general, los tiempos de respuestas estn dados por los tipos de conexiones a Internet por parte del cliente, sin embargo, tambin es necesario considerar que el tamao de algunas evidencias influir en los tiempos de respuesta entre la aplicacin y el cliente.

2.6.4.1

Tiempos de respuesta acordes con la conexin establecida.

Se requiere que la aplicacin funcione y responda de manera habitual como cualquier sitio construido bajo plataforma Web, sin embargo, es necesario aclarar que los tiempos de respuesta influirn segn el tipo de conexin que posea el cliente y las caractersticas del computador cliente.

En el caso de las evidencias, existen videos o pelculas digitalizadas, para poder visualizar tales elementos, los tiempos de respuesta pueden ser lentos dado el gran tamao que puede llegar a utilizar un video.

Portafolio en lnea, Facultad de Educacin 2.6.5 REQUERIMIENTOS DE ESPACIO EN DISCO DEL SERVIDOR

60

En una etapa inicial, el sistema de portafolio en lnea tal vez no requiera demasiado espacio para el almacenamiento fsico de las evidencias de los alumnos, sin embargo, con el paso del tiempo, se supone un incremento en la cantidad de usuarios del sistema por lo que se ha hecho el siguiente clculo para determinar :

Gigas Disponibles

Total en Megas

Megas por usuario mx.

Total usuarios

Promedio Total Cursos Alum x Curso

30

30.000

40

750

30

25

(Tabla 2.6.5) Tabla de clculo de espacio en disco para almacenamiento.

En este caso en particular, se ha hecho el supuesto de que cada usuario puede ocupar un tamao mximo en disco de 40 Mbytes, en el caso que todos los alumnos ocupen todo su espacio asignado, y con un disco con 30 Gbytes disponibles para almacenamiento total y un promedio de curso de 30 alumnos, el sistema de Portafolios podra albergar un mximo de 25 cursos simultneos.

Aunque estas cifras son tentativas y los usuarios del sistema actualmente no exeden los 50 alumnos, en un futuro, debe considerarse aumentar el tamao disponible en disco para el almacenamiento de las evidencias o bien establecer restricciones de tamao a las evidencias que, por ahora no existen. Dado que, como el sistema esta en una fase inicial es necesario ofrecer todas las posibilidades a los alumnos para que desarrollen sus portafolios segn sus propias necesidades.

Portafolio en lnea, Facultad de Educacin

61

CAPITULO ( III ) ANALISIS

Portafolio en lnea, Facultad de Educacin

62

3.1 Modelo de Anlisis

3.1.1 Modelo de anlisis para las evidencias del alumno

Diseo de Interfaces

Diseo de Procesos

Diseo de Entidades

Almacenar evidencias

Guardar evidencias

Crear/Editar comentarios

Ver/Guardar comentarios

Alumno

Ver evidencias y comentarios

Mostrar evidencias

Portafolio de proceso

Listar evidencias

Listar evidencias

Quitar evidencias

Eliminar evidencias

(Figura 3.1.1) Modelo de anlisis para las evidencias del alumno.

Las interfaces y procesos ms importantes, se han resaltado y sern objeto de estudio y desarrollo ms profundo en los captulos posteriores

Este modelo de anlisis enfocado a las tareas referentes al alumno y las evidencias, en este aspecto cabe notar que las evidencias pueden tener asociado un comentario crtico a ella.

Portafolio en lnea, Facultad de Educacin 3.1.2 Modelo de anlisis para los comentarios del alumno Diseo de Interfaces Diseo de Procesos

63

Diseo de Entidades

Quitar comentarios

Borrar comentarios

Alumno

Ver/Editar comentarios

Guardar comentarios Comentarios

Listar comentarios

Mostrar comentarios

Listar comentarios

(Figura 3.1.2) Modelo de anlisis para los comentarios del alumno.


En el modelo de anlisis para los comentarios del alumno se puede ver que los alumnos pueden escribir ms de un comentario, sin embargo, mas adelante se ver que existen comentarios tanto nicos por Facetas, pero no existen limitantes en cantidad en los criterios, de esta forma, los principales elementos en este modelo estn resaltados y sern motivo de estudio ms adelante.

Portafolio en lnea, Facultad de Educacin 3.1.3 Modelo de anlisis para el portafolio de producto del alumno Diseo de Interfaces Diseo de Procesos

64

Diseo de Entidades

Personalizar y crear Portafolio

Crear/Editar P. Producto

Datos del portafolio

Seleccionar facetas

Guardar Facetas

Facetas del producto

Alumno

Seleccionar comentarios

Guardar comentarios

Comentarios del producto

Seleccionar evidencias

Guardar evidencias

Comentarios

Generar Portaf. Producto

Generar sitio off-line

Portafolio de proceso

(Figura 3.1.3) Modelo de anlisis para el portafolio de producto.

Evidencias del producto

El portafolio de producto es la etapa final de la confeccin de un portafolio, para ello, se coleccionan las mejores evidencias y comentarios que el alumno ha almacenado y editado. El sistema deber cumplir con este requisito y tambin generar un sitio navegable fuera de lnea, independiente de la base de datos y el servidor Web, en este modelo se analizarn las interfaces y procesos resaltados pues se considera parte fundamental para la generacin del portafolio de producto.

Portafolio en lnea, Facultad de Educacin 3.1.4 Modelo de anlisis para generar el portafolio de producto Diseo de Interfaces Diseo de Procesos

65

Diseo de Entidades

Datos del portafolio

Error al generar portafolio Facetas del producto

Alumno

Generar Portaf. Producto

Generar sitio off-line Comentarios del producto

Descarga de sitio off-line Evidencias del producto

(Figura 3.1.4) Modelo de anlisis para generar el portafolio de producto.


Uno de los puntos destacables dentro del portafolio es la de generar un sitio off-line, este ser denominado Portafolio de producto que es una seleccin de las mejores evidencias y comentarios creados. El portafolio de producto se genera extrayendo de la base de datos y los directorios del alumno, toda aquella informacin necesaria, esto pues existe el requisito que el alumno pueda al final de su proceso de construccin de portafolio llevarse una copia de su portafolio de producto y poder as mostrar de desempeo docente en otros lugares donde no existan conexiones a Internet. En este modelo, los aspectos ms importantes han sido resaltados para un anlisis posterior.

Portafolio en lnea, Facultad de Educacin 3.1.5 Modelo de anlisis para el profesor Diseo de Interfaces Diseo de Procesos

66

Diseo de Entidades

Usuarios

Configurar portafolios

Habilitar portafolios

Perfiles de usuario

Profesor

Ver elementos nuevos

Listar nuevos elementos

Portafolio de proceso

Crear/Editar comentarios

Ver evidencia y comentario

Comentarios

(Figura 3.1.5) Modelo de anlisis para el profesor.


En el modelo de anlisis para el profesor, podemos ver que las tareas principales se concentran en la revisin de los portafolios, para ello se dispone de interfaces para ver los elementos nuevos y tambin para configurar los portafolios de los alumnos, en este ltimo caso, el profesor puede determinar cuales sern las facetas en las que el alumno podr trabajar y en cuales no, de igual forma, se utiliza la misma interfaz de configuracin para los criterios. Nuevamente, se concentrar la atencin en los elementos ya sean interfaces y procesos que estn resaltados en el modelo de anlisis.

Portafolio en lnea, Facultad de Educacin 3.1.6 Modelo de anlisis para el Administrador Diseo de Interfaces Diseo de Procesos

67

Diseo de Entidades

Mantencin de rutas

Guardar rutas de sistema

Datos de servidor

Mantencin de Carreras

Carreras

Administrador Mantencin de cursos Mantenedor de tablas Cursos

Mantencin de profesores

Profesores

(Figura 3.1.6) Modelo de anlisis para el administrador.


El modelo de anlisis del administrador concentra sus funciones en la mantencin de tablas, para ello se ha diseado un nico control de mantencin, sin embargo se considera que es muy comn este tipo de tareas en un sistema, por lo que no marca una diferencia significativa con otros sistemas, por lo que no ser motivo de estudio en etapas posteriores, pero si se ha sealado en el modelo de casos de uso y de anlisis su funcionamiento, dejando en claro que estas actividades tambin estn presentes en el funcionamiento del sistema.

Portafolio en lnea, Facultad de Educacin

68

CAPITULO ( IV ) DISEO

Portafolio en lnea, Facultad de Educacin

69

LENGUAJE DE DESARROLLO DE LA APLICACION

Dado el alto requerimiento de conectividad y el uso de la plataforma Internet para los clientes, es necesario determinar la plataforma de desarrollo para el software, en este punto, se ha querido comentar que existen actualmente varias plataformas de desarrollo Web entre las ms comunes encontramos ASP, PHP, Java Server Pages, Coldfusion, Perl, por mensionar algunos.

Dado que actualmente los desarrollos Web dentro de la Universidad Catlica estn implementados casi todos en el lenguaje PHP y que el centro de tecnologas de informacin CTIC (lugar donde finalmente ser implementado el sistema) dispone tambin de este lenguaje se ha adpotado ste como el lenguaje para desarrollo de la aplicacin de Portafolio en Lnea.

Es tambin importante que dicha adopcin del lenguaje provee al alumno una curva de aprendizaje muy rpido pues ste ya domina la sintaxis y entiende la filosofa de los desarrollos bajo plataforma Web. Otra caracterstica importante es que el lenguaje es libre de plataforma, es decir, esta disponible para una gran cantidad de sistemas operativos, entre ellos Linux, Unix, Mac-OS, Windows entre otros.

Portafolio en lnea, Facultad de Educacin

70

INTRODUCCION A LOS MODELOS DE SISTEMA

Un modelo es una representacin de la realidad. Como una imagen vale por mas de mil palabras, la mayora de los modelos son representaciones grficas de la realidad.

El modelado de datos de datos es una tcnica para la organizacin y documentacin de los datos de un sistema. Generalmente la modelizacin de datos recibe el nombre de Modelado de base de datos, dato que estos modelos se implantan generalmente como bases de datos.

Un diagrama de entidad relacin es una herramienta de modelado de datos que describe las asociaciones que existen entre distintas categoras de datos dentro de los sistemas de informacin. Diversas notaciones han sido sugeridas, en nuestro caso particular utilizaremos solo dos, que corresponden al modelo Relacional Grfico.

Nombre de entidad

ENTIDAD : es cualquier ente real o abstracto sobre el que deseamos almacenar datos.

(Figura 4.0.1) Descripcin de una entidad en el modelo relacional grfico.


RELACION : entidades, es una asociacin que existe entre una o mas expertos piensan las relaciones como

algunos

actividades o sucesos que unen una o mas entidades entre si.

(Figura 4.0.2) Descripcin de una relacin en el modelo relacional grfico.

Portafolio en lnea, Facultad de Educacin

71

4.1 MODELO RELACIONAL PORTAFOLIO EN LINEA

DE

DATOS

PARA

EL

El presente modelo de datos explica la organizacin de los datos y sus relaciones para el sistema de portafolio en lnea, este modelo ha sido desarrollado con la herramienta de modelado de datos Power Designer versin 9.5
entradas id_entrada <pk> nombre descripcion id_entrada = id_entrada perfiles <fk 2> usuario codigo_curso id_entrada <fk 1> inscripciones <fk 1> usuario rut dv nombre apellidos direccion fono email ciudad fecha password conexion carrera codigo_curso <fk 2> comentarios <pk> id_comentario <fk 1> usuario <fk 2> codigo_curso destino comentario_alum usuario = usuario titulo_alum comentario_prof titulo_prof f_coment_alum f_coment_prof leido_por_prof leido_por_alum cursos usuario = usuario pro_datos id_producto <pk> <fk > usuario codigo_curso titulo subtitulo logo_instit foto_opc nombre_instit descrip_instit direccion ciudad comuna telefono fax email curso profesor profesor_guia pro_evidencias <pk> id_ev idencia <fk > id_producto usuario id_producto = id_producto codigo_curso tipo archiv o faceta criterio fecha_upload tamano descripcion nombre_archiv o tipo_archivo comentario_alum leido_por_alum f_coment_alum codigo_curso = codigo_curso codigo_curso = codigo_curso codigo_curso <pk> semestre descripcion profesor fecha_inicio estado foro

servidor ruta_serv idor <pk> ruta_archiv os ruta_internet usuario = usuario

usuario = usuario

codigo_curso = codigo_curso

control_acceso usuario salida entrada tipo_usuario ip usuarios usuario <pk> password nombre rut dv apellidos direccion fono email ciudad tipo_usuario conexion id id_grupo id_carrera <fk >

carreras id_carrera <pk> nombre

id_carrera = id_carrera

usuario = usuario

port_procesos usuario <fk 3> codigo_curso <fk 1> archiv o faceta criterio fecha_upload tamano descripcion comentario_prof nombre_archiv o tipo_archivo <fk 2> comentario_alum leido_por_prof leido_por_alum f_coment_prof f_coment_alum

id_producto = id_producto id_producto = id_producto pro_facetas id_producto <fk > faceta titulo foto_opc

pro_comentarios id_comentario <pk> id_producto <fk > usuario codigo_curso destino comentario_alum titulo_alum f_coment_alum foto_opc

tipo = tipo_archiv o

tipo_archivo tipo <pk> imagen

(Figura 4.1) Modelo relacional grfico para el sistema de portafolios.

Portafolio en lnea, Facultad de Educacin

72

4.2 DESCRIPCION DEL MODELO RELACIONAL DE DATOS

A continuacin se presenta el esquema relacional del modelo de datos anteriormente descrito :

a)

Tabla Clave primaria Claves forneas Descripcin

: entradas { id_entrada, nombre, descripcin } : id_entrada : <no hay> : Contiene las entradas para las facetas y/o criterios.

b)

Tabla Clave primaria Claves forneas Descripcin

: perfiles { usuario, codigo_curso, id_entrada } : <no hay> : usuario, id_entrada : Contiene las configuraciones de los permisos de acceso.

c)

Tabla Clave primaria Claves forneas Descripcin

: servidor { ruta_servidor, ruta_archivos, ruta_internet } : <no hay> : <no hay> : Contiene las rutas de acceso para la aplicacin.

d)

Tabla tipo_usuario, ip } Clave primaria Claves forneas Descripcin

: control_acceso { usuario, salida, entrada, : <no hay> : <no hay> : Histrico de visitas autentificadas en la aplicacin.

Portafolio en lnea, Facultad de Educacin e) Tabla Clave primaria Claves forneas Descripcin : carreras { id_carrera, nombre } : id_carrera : <no hay> : Tabla de carreras de los alumnos.

73

f)

Tabla Clave primaria Claves forneas Descripcin

: cursos { codigo_curso, semestre, descripcion, profesor, : codigo_curso : <no hay> : Tabla de cursos para realizar portafolios.

fecha_inicio, estado, foro }

g)

Tabla Clave primaria Claves forneas Descripcin

: tipo_archivo { tipo, imagen } : tipo : <no hay> : Lista de tipos MIME para las evidencias.

h)

Tabla Clave primaria Claves forneas Descripcin

: inscripciones { usuario, rut, dv, nombre, apellidos, : <no hay> : usuario : Datos de los alumnos inscritos para realizar portafolios.

direccion, fono, email, ciudad, fecha, password, conexin, carrera }

i)

Tabla id_carrera } Clave primaria Claves forneas Descripcin

: usuarios { usuario, rut, dv, nombre, apellidos,

password, direccion, fono, email, ciudad, tipo_usuario, conexin, id, id_grupo, : usuario : id_carrera : Lista de los usuarios del sistema.

Portafolio en lnea, Facultad de Educacin j) Tabla

74

: port_procesos { usuario, codigo_curso, archivo, faceta,

criterio, fecha_upload, tamano, descripcion, comentario_prof, nombre_archivo, tipo_archivo, comentario_alum, leido_por_prof, leido_por_alum, f_coment_prof, f_coment_alum } Clave primaria Claves forneas Descripcin : <no hay> : usuario, codigo_curso, tipo_archivo : Tabla de referencias y comentarios de las evidencias.

k)

Tabla

: comentarios { id_comentario, usuario, codigo_curso,

destino, comentario_alum, titulo_alum, titulo_prof, f_coment_alum, comentario_prof, titulo_prof, f_coment_alum, f_coment_prof, leido_por_prof, leido_por_alum } Clave primaria Claves forneas Descripcin : id_comentario : usuario, codigo_curso : Tabla de comentarios criticos.

l)

Tabla Clave primaria Claves forneas Descripcin

: pro_facetas { id_producto, faceta, titulo, foto_opc } : <no hay> : id_producto : Almacena las facetas seleccionadas por el alumno para el

portafolio de producto.

m)

Tabla

: pro_datos { id_producto, usuario, codigo_curso, titulo,

sub_titulo, logo_instit, foto_opc, nombre_instit, descrip_instit, direccion, ciudad, comuna, telefono, fax, email, curso, profesor, profesor_guia } Clave primaria Claves forneas Descripcin : id_producto : usuario, codigo_curso : Crea el portafolio de producto y sus datos relevantes.

Portafolio en lnea, Facultad de Educacin n) Tabla

75

: pro_evidencias { id_evidencia, id_producto, usuario,

codigo_curso, archivo, faceta, criterio, fecha_upload, tamano, descripcion, nombre_archivo, tipo_archivo, comentario_alum, leido_por_alum, f_coment_alum } Clave primaria Claves forneas Descripcin : id_evidencia : id_producto, usuario, codigo_curso : Almacena las referencias de las evidencias seleccionadas

para el portafolio de producto del alumno.

o)

Tabla foto_opc } Clave primaria Claves forneas Descripcin

: pro_comentarios { id_comentario, id_producto,

usuario, codigo_curso, destino, comentario_alum, titulo_alum, f_coment_alum, : id_comentario : id_producto, usuario, codigo_curso : Almacena los comentarios seleccionados para el

portafolio de producto del alumno.

Portafolio en lnea, Facultad de Educacin

76

4.3 DISEO DE LA INTERFAZ DE USUARIO


4.3.1 ELEMENTOS DESCRIPTIVOS PARA LA INTERFAZ DE USUARIO Los elementos descriptivos corresponden a una serie de objetos que representan elementos en la interfaz, aunque existen muchos ms objetos para disear interfaces, la siguiente lista representa los elementos bsicos necesarios y utilizados para crear las principales interfaces del portafolio en lnea. Descripcin de los elementos Etiqueta de texto Texto dinmico Hiper enlace Cuadro de texto para entradas Cuadro de texto para contraseas
******

Objeto de interfaz Texto normal


<Texto obtenido de una base de datos> Enlace de hipertexto

Editor de texto multilnea

Botn de comando

Botn

Documento o evidencia

Imagen

(Tabla 4.3.1) Tabla de elementos bsicos para construir interfaces.

Portafolio en lnea, Facultad de Educacin 4.3.2 INTERFAZ PRINCIPAL DEL PORTAFOLIO EN LINEA
Logo de la Universidad

77

SISTEMA DE PORTAFOLIO EN LINEA


Area de trabajo en la cual se despliegan las pginas.

Men de opciones

Estndares de desempeo Gua de diseo del portafolio Ejemplos de portafolios Elaboracin en lnea Foro de colaboracin Contctenos Sugerencias al portafolio
Opciones generales y alternativas para el sistema. Sistema de pestaas que se activan segn el perfil de usuario y las opciones que tiene habilitadas. Enlace para elaborar un portafolio (necesita autentificarse). Enlaces de ayuda para los visitantes.

(Figura 4.3.2) Interfaz principal del sistema de portafolio en lnea.


Bsicamente la interfaz principal del portafolio esta conformada por un men principal compuesto de hipervnculos que en general son elementos de ayuda para informar a los visitantes de las caractersticas y los estndares de los portafolios. En otra parte de la interfaz se encuentra un cuadro o frame en el cual se despliegan todas las pginas que conforman el Portafolio en Lnea. Una de las caractersticas de este diseo es que tambin incorpora un sistema de pestaas y anillos que simulan un portafolio, donde cada pestaa representa una faceta del portafolio en particular.

Portafolio en lnea, Facultad de Educacin 4.3.3 INTERFAZ PARA LISTAR Y ALMACENAR EVIDENCIAS

78

Agregar evidencias a criterio <Criterio> de la faceta <Faceta>


Ruta local de archivo a almacenar Examinar Agregar

<Area de mensajes para errores al almacenar evidencias>

Lista de evidencias en criterio : <Criterio>


A P B Nombre de evidencia <Nombre de evidencia1> Descripcin <Descripcin documento 1> Fecha de subida <Fecha de Upload>

Comentario del Alumno : <fecha creacin> <Este espacio despliega el comentario del alumno cuando el alumno hace click en el icono de la columna (A), el icono de la columna (A) aparece solamente cuando el alumno escribe un comentario sobre la evidencia actual> Comentario del Profesor : <fecha creacin> <Este espacio despliega el comentario del profesor cuando el alumno hace click en el icono de la columna (P), el icono de la columna (P) aparece solamente cuando el profesor escribe un comentario sobre la evidencia actual> <Nombre de evidencia2> <Nombre de evidencia3> <Descripcin documento 2> <Descripcin documento 3> <Fecha de Upload> <Fecha de Upload>

Borrar evidencias

Total : <cantidad> de evidencias

(Figura 4.3.3) Interfaz para listar y almacenar evidencias.


La interfaz para listar y almacenar evidencias, es una de las principales interfaces de la aplicacin, en ella, se puede almacenar evidencias, acceder directamente a visualizar las evidencias, visualizar rpidamente los comentarios realizados tanto por el profesor como por el alumno, para ello, se dispone de dos columnas (A. y P.) en las cuales es posible ver un icono sealando si la evidencia tiene o no el comentario, adems es posible marcar las evidencias para ser eliminadas, si as se requiere.

Portafolio en lnea, Facultad de Educacin

79

4.3.4 INTERFAZ PARA VISUALIZAR, CREAR Y/O EDITAR COMENTARIOS A EVIDENCIAS Visualizar Evidencias y Comentarios
Comentario crtico a evidencia del alumno : <Nombre de Evidencia> Comentario del profesor : <Comentario del profesor>

Barra de herramientas para


<En este cuadro de texto se carga y edita el comentario del alumno.>

<En este espacio se visualiza el comentario del profesor si existe.>

Guardar

<< Volver

Evidencia almacenada por el alumno a visualizar.

(Figura 4.3.4) Interfaz para visualizar crear y editar comentarios a evidencias.


Una de las caractersticas al visualizar evidencias es que no solamente es posible ver la evidencia como tal, sino que adems, es posible crear/editar un comentario crtico para la evidencia y tambin es posible leer el comentario del profesor, esto se logra dividiendo la ventana en tres paneles o Frames, as es posible tener la evidencia, el comentario del profesor y el comentario del alumno a la evidencia en una sola interfaz, cabe notar que la edicin de comentarios se realiza en formato HTML enriquecido mediante un editor de texto compatible con Internet Explorer.

Portafolio en lnea, Facultad de Educacin 4.3.5 INTERFAZ PARA LISTAR COMENTARIOS A CRITERIOS

80

Listado de comentarios crticos Comentarios crticos en criterio : <Criterio actual>

Ttulo del comentario crtico <Ttulo del comentario crtico 1> <Ttulo del comentario crtico 2> <Ttulo del comentario crtico 3> <Ttulo del comentario crtico N>

Fecha Comentario <Fecha Creacin 1> <Fecha Creacin 2> <Fecha Creacin 3> <Fecha Creacin N>

Nuevo comentario

Eliminar comentarios

<< Volver

(Figura 4.3.5) Listado de comentarios crticos en un criterio.


La interfaz para listar comentarios es muy sencilla, sin embargo en ella es posible realizar la mayora de las tareas requeridas para ello, es posible crear un nuevo comentario haciendo click en el botn dispuesto para ello, tambin se puede eliminar uno o mas comentarios seleccionando las casillas y pulsando el botn para eliminar. Tambin es posible visualizar y editar un comentario crtico pinchando en los enlaces dispuestos en los ttulos de los comentarios. Cabe notar que una faceta dispone de un solo comentario crtico, pero un criterio puede almacenar o contener mas de uno, con lo que se requiere esta interfaz para que el alumno pueda gestionar fcilmente sus comentarios.

Portafolio en lnea, Facultad de Educacin 4.3.6 INTERFAZ PARA EDICION DE COMENTARIOS CRITICOS

81

Edicin de comentarios crticos


Ttulo de comentario Comentario Barra de herramientas para edicin de texto enriquecido HTML

<Comentario crtico del alumno>

Guardar comentario

<< Volver a la lista

Comentario del profesor :


<Espacio para visualizar el comentario del profesor.>

(Figura 4.3.6) Interfaz para edicin de comentarios crticos.


La interfaz para editar los comentarios est compuesta por dos paneles o Frames, en el primero, el alumno puede ver, crear o editar su comentario crtico, para ello, es indispensable que el incluya un ttulo a su comentario, tambin, dispone de un cuadro de texto enriquecido para que pueda dar formato a su comentario. El segundo frame contiene el comentario realizado por el profesor, de esta forma, se produce una colaboracin entre Profesor y alumno, potenciando y mejorando las reflexiones del alumno. Note que el alumno no puede intervenir los comentarios del profesor, por lo que solo le es permitido leerlos.

Portafolio en lnea, Facultad de Educacin 4.3.7 INTERFAZ MENU PORTAFOLIO DE PRODUCTO OFF-LINE

82

Men de portafolio de producto

* Datos de la Institucin y el portafolio

Ingresa aqu los datos de la Institucin o escuela donde te desempeaste, y para la cual estas realizando el portafolio. Selecciona aqu las Facetas o entradas que necesitars para tu portafolio de producto. Selecciona tus comentarios crticos o reflexiones que desees incluir en el portafolio de producto. Selecciona tus evidencias que necesites para construir tu portafolio de producto. Finaliza el proceso de construccin de portafolio de producto y genera un portafolio Off-Line visible sin conexin a Internet.

* Seleccin de Facetas

* Seleccin de Comentarios crticos

* Seleccin de Evidencias

* Generar Portafolio de Producto

(Figura 4.3.7) Interfaz para el men de portafolio de producto.


Esta es una de las interfaces mas sencillas del sistema del portafolio en lnea, pero tambin una de las mas importantes, dado de desde esta interfaz son lanzadas todas las dems interfaces que se requieren para generar un portafolio de producto, se recuerda que el portafolio de producto es una recopilacin de las mejores evidencias y comentarios y conformarn un nuevo portafolio navegable off-lne, independiente del servidor Web y de la base de datos que el alumno podr llevar y mostrar en algn medio de almacenamiento (de preferencia CD o DVD).

Portafolio en lnea, Facultad de Educacin

83

4.3.8 INTERFAZ PERSONALIZAR DATOS DEL PORTAFOLIO DE PRODUCTO

Personalizar portafolio de producto


Nombre de Institucin Descripcin

Logo o imagen

Quitar la imgen? Examinar

Direccin Ciudad Telfono Comuna

Curso Profesor Profesor gua

Ttulo de portafolio Sub ttulo Imagen opcional Quitar la imgen? Examinar

Guardar datos

Limpiar datos

<< Volver

(Figura 4.3.8 ) Interfaz para personalizar y crear un portafolio de producto.

Portafolio en lnea, Facultad de Educacin

84

La interfaz para personalizar los datos del portafolio de producto, permite personalizar la presentacin que ste llevar. La informacin necesaria para personalizar se puede agrupar en tres grupos :

Datos de la institucin, en este grupo se encuentran los datos de la organizacin en la cual el alumno se desempe, es posible aqu almacenar una imagen que sea representativa de la institucin como logotipo u otro similar.

Datos del curso, en este otro grupo se catalogan los datos del curso en el cual el alumno estuvo trabajando, para ello se disponen de los datos necesarios.

Datos opcionales, aqu el alumno puede especificar un ttulo y subttulo para su portafolio de producto, adems de una imagen opcional que puede estar asociada al carcter del desempeo docente que el alumno tuvo durante su periodo de desarrollo o proceso.

En el caso de las imgenes, tambin existe una casilla de verificacin para quitar la imagen asociada si es que el alumno as lo necesita.

Portafolio en lnea, Facultad de Educacin

85

4.3.9 INTERFAZ PARA SELECCIONAR LAS FACETAS DEL PORTAFOLIO DE PRODUCTO Incluya las Facetas para el portafolio de producto Faceta A Ttulo Imagen Vista Quitar imagen?
Examinar

Faceta B Ttulo Imagen Vista Quitar imagen?


Examinar

Faceta C Ttulo Imagen Vista Quitar imagen?


Examinar

Faceta D Ttulo Imagen Vista Quitar imagen?


Examinar

Guardar datos

Limpiar datos

<< Volver

(Figura 4.3.9) Interfaz para seleccionar facetas del portafolio de producto.

Portafolio en lnea, Facultad de Educacin

86

Una de las interfaces necesarias para poder generar el portafolio de producto es la que permite al alumno escoger las facetas que conformarn su portafolio de producto, para ello, cada faceta cuenta con una casilla que indica si la faceta esta incluida o no en el producto, adems, es posible escribir un ttulo personalizado para cada faceta y una imagen opcional asociada a cada faceta, esto permite al alumno personalizar an mas su portafolio de producto.

Cabe notar que cuando una imagen es almacenada, la interfaz permite visualizar una miniatura de la imagen, esta miniatura est hipervinculada, y permite mostrar la imagen en tamao real en otra ventana del navegador, tambin se incluye una casilla para poder quitarla si es que el alumno as lo requiere.

Portafolio en lnea, Facultad de Educacin 4.3.10

87

INTERFAZ PARA LA GENERACION DE PORTAFOLIO DE PRODUCTO

Generar portafolio de producto


Ya se ha recopilado la informacin necesaria para generar su portafolio de producto. Para iniciar el proceso de generacin off-line pulse el botn Generar portafolio, esto puede tardar algunos minutos dependiendo de la informacin recopilada. Si no desea generar su portafolio y realizar solo una vista previa de su Portafolio de producto haga click

Vista preliminar

Generar

<< Volver

(Figura 4.3.10) Interfaz para el men de portafolio de producto.


4.3.11 INTERFAZ PARA DESCARGAR EL PORTAFOLIO DE PRODUCTO FINAL Generar portafolio de producto
IMPORTANTE. Su portafolio de producto ha sido generado satisfactoriamente, dentro de unos segundos aparecer el siguiente cuadro de dialogo. Para guardar su portafolio haga click en el botn Guardar. Si no aparece el cuadro siguiente, haga click aqu para bajar el portafolio manualmente. << Volver

(Figura 4.3.11) Interfaz para descargar el portafolio de producto final.


La generacin del portafolio de producto est bsicamente compuesta por dos interfaces que informan al alumno del comienzo del proceso de creacin off-line de la aplicacin y otra en la cual es posible descargar el archivo comprimido con el sitio de portafolio de producto, cabe notar que entre una y otra interfaz, se produce el proceso que genera el portafolio de producto, buscando los datos y convirtiendo las pginas dinmicas en pginas HTML estticas navegables sin conexin a la Web.

Portafolio en lnea, Facultad de Educacin 4.3.12

88

INTERFAZ PARA LISTAR ELEMENTOS NUEVOS AL REVISAR UN PORTAFOLIO POR PARTE DEL PROFESOR A UN ALUMNO

Listado de comentarios y evidencias nuevas del alumno <alumno> Faceta A Comentario


<ttulo del comentario crtico a Faceta A> <fecha de creacin>

Criterio A1 Comentario

<ttulo del comentario crtico 1 a Criterio A1> <ttulo del comentario crtico 2 a Criterio A1> <ttulo del comentario crtico N a Criterio A1>

<fecha> <fecha> <fecha> <fecha> <fecha> <fecha> <fecha>

Evidencias
<Nombre de evidencia 1> <Nombre de evidencia 2> <Nombre de evidencia 3> <Nombre de evidencia N>

Criterio A2 Comentarios

<ttulo del comentario crtico 1 a Criterio A1> <ttulo del comentario crtico N a Criterio A1>

<fecha> <fecha> <fecha> <fecha> <fecha>

Evidencias
<Nombre de evidencia 1> <Nombre de evidencia 2> <Nombre de evidencia N>

Criterio A3 Comentarios No existen comentarios para este criterio Evidencias No existen evidencias para este criterio

(Figura 4.3.12) Interfaz listar elementos nuevos de un portafolio.


Una de las caractersticas del portafolio es que el profesor puede revisar fcilmente los comentarios y las evidencias del alumno, para ello, se ha dispuesto de una interfaz que lista en forma jerrquica las facetas, criterios, comentarios y evidencias, en ella, se listan solo los elementos nuevos que no ha revisado el profesor, de esta forma, se genera un listado dinmico e hipervinculado que lleva al profesor a revisar comentarios o evidencias del alumno.

Portafolio en lnea, Facultad de Educacin 4.3.13

89

INTERFAZ PARA CONFIGURAR UN PORTAFOLIO DE UN ALUMNO

Configurar portafolio del alumno


Seleccione o desmarque las casillas para habilitar las facetas y criterios correspondientes para el alumno : <Alumno>

Faceta A Criterios Faceta B Criterios Faceta C Criterios Faceta D Criterios Faceta X


Guardar

A1

A2

A3

A4

A5

B1

B2

B3

B4

B5

C1

C2

C3

C4

C5

D1

D2

D3

D4

D5

D6

<< Volver

(Figura 4.3.13) Interfaz para configurar un portafolio.


Esta interfaz permite al profesor especificar con que facetas o criterios puede trabajar el alumno, esta interfaz esta basada solo en casillas que habilitan o inhabilitan las opciones en el perfil del alumno, para acceder a esta interfaz, el profesor debe seleccionar a un alumno de la lista del curso.

Portafolio en lnea, Facultad de Educacin

90

4.4 DISEO DE PROCESOS

Una etapa importante en el desarrollo de una aplicacin es hacer un diseo de los procesos y su funcionamiento bsico, esto permite tener una clara visin de cmo se pueden desarrollar de forma mas clara los procesos de la aplicacin.

A continuacin consideraremos los procesos mas importantes mencionados en el capitulo III de anlisis, correspondientes a los modelos de anlisis.

Portafolio en lnea, Facultad de Educacin 4.4.1 PROCESO PARA ALMACENAR Y LISTAR EVIDENCIAS
Inicio

91

Desplegar formulario para subir evidencias NO Sube documento para almacenar

SI

NO

Posee un nombre vlido

SI Almacena el documento en el servidor y en la base de datos, actualiza y despliega el listado de evidencias almacenadas

Mostrar formulario y listado de evidencias

NO

Mostar evidencia y comentario

SI Mostrar evidencia y comentario crtico

Mostrar evidencia y comentario

Evidencia Fin

(Figura 4.4.1) Diagrama de flujo para almacenar y listar evidencias.


El siguiente diagrama de flujo representa la forma en la cual el alumno puede almacenar evidencias, listar las evidencias almacenadas y tambin como mostrar una evidencia en particular y su comentario crtico.

Portafolio en lnea, Facultad de Educacin 4.4.2 PROCESO PARA CREAR Y/O EDITAR COMENTARIOS CRTICOS
Inicio

92

Listar comentarios crticos

NO NO Crear nuevo comentario Eliminar comentarios crtico

Ver/Editar comentario

Guardar comentario

Mostrar comentarios seleccionados a eliminar

SI Mostrar comentario almacenado Quitar comentarios

Guardar comentario

SI

Borra comentarios crticos

FIN

(Figura 4.4.2) Diagrama de flujo para crear y editar comentarios crticos.


Este diagrama de flujo permite conocer como es el manejo y gestin de los comentarios crticos, los procesos principales se encargan de Ver y editar comentarios, crear un nuevo comentario crtico y eliminar comentarios, la mayora de estos procesos genera salidas por pantalla.

Portafolio en lnea, Facultad de Educacin 4.4.3 MENU PARA GENERAR EL PORTAFOLIO DE PRODUCTO

93

Inicio

Menu de portafolio de producto

Personalizar datos del portafolio de producto

Seleccionar facteas

Seleccionar comentarios crticos

Seleccionar evidencias

Generar portafolio de producto

(Figura 4.4.3) Diagrama de flujo del men para generar portafolio de producto.

Una de las caractersticas de la generacin del portafolio de producto es que para llegar a construir un portafolio navegable fuera de lnea es necesario pasar por varias etapas, para ello, se ha diseado o construido un men con el objetivo de llegar a generar el un portafolio de producto, cada opcin de men conlleva a otras interfaces necesarias que sern explicadas en las pginas siguientes de acuerdo a la numeracin de cada opcin de men en este diagrama de flujo.

Portafolio en lnea, Facultad de Educacin

94

4.4.4 PROCESO PARA PERSONALIZAR Y CREAR PORTAFOLIO DE PRODUCTO


1

SI

Tiene el alumno un portafolio de producto

NO

Cargar formulario con datos guardados

Crear nuevo formulario en blanco

Mostrar formulario

Modificar datos del portafolio de producto

Crear portafolio de producto y guardar datos

FIN

(Figura 4.4.4) Diagrama de crear y personalizar un portafolio de producto.

El proceso de personalizacin y creacin del portafolio de producto consta de una pequea validacin, si el alumno no tiene un portafolio de producto, se crear uno nuevo para l, en el caso de tener definido uno anteriormente, se cargan sus datos previamente guardados.

Portafolio en lnea, Facultad de Educacin

95

4.4.5 PROCESO DE SELECCIN DE FACETAS PORTAFOLIO DE PRODUCTO


2

Tiene el alumno un portafolio de producto

NO

Mostrar mensaje de error, voolver a paso (1)

SI

SI

Tiene facetas seleccionadas

NO

Cargar opciones con facetas seleccionadas

Crear formulario para seleccionar facetas

Mostrar formulario con facetas

Sube imgenes asociadas

SI

NO

Modificar facetas del portafolio de producto

Guarda archivos en el servidor

FIN

Imagen asociada a faceta

(Figura 4.4.5) Diagrama de flujo del para seleccionar facetas.


Una de las caractersticas de la seleccin de facetas es que es posible asociar y almacenar una imagen descriptiva para cada faceta, esto produce un nivel ms personalizado al portafolio de producto del alumno.

Portafolio en lnea, Facultad de Educacin

96

4.4.6 PROCESO DE SELECCIN DE COMENTARIOS CRTICOS PARA EL PORTAFOLIO DE PRODUCTO


3

Tiene el alumno un portafolio de producto

NO

Mostrar mensaje de error, voolver a paso (1)

SI

SI Formulario con evidencias seleccionadas

Tiene comentarios seleccionados

NO Crear formulario para seleccionar comentarios crticos

Mostrar formulario con comentarios

Sube imgenes asociadas

SI

NO

Modificar lista de comentarios asociados al portafolio

Guarda archivos en el servidor

FIN

Imagen asociada a comentario

(Figura 4.4.6) Diagrama de flujo para seleccionar comentarios crticos


Al igual que en el proceso de seleccin de facetas, en la seleccin de comentarios es posible asociar, quitar o cambiar las imgenes asociadas a los comentarios, si el alumno posee comentarios previamente seleccionados, estos aparecern en el formulario.

Portafolio en lnea, Facultad de Educacin

97

4.4.7 PROCESO DE SELECCIN DE EVIDENCIAS PARA EL PORTAFOLIO DE PRODUCTO


4

Tiene el alumno un portafolio de producto

NO

Mostrar mensaje de error, voolver a paso (1)

SI

SI

Tiene evidencias seleccionadas

NO

Formulario con evidencias seleccionadas

Crear formulario para seleccionar evidencias

Mostrar formulario con evidencias

Modificar lista de evidencias para el portafolio

FIN

(Figura 4.4.7) Diagrama de flujo para seleccionar evidencias.


El proceso de seleccin de evidencias constar con un formulario que permitir visualizar las evidencias clasificadas por facetas y criterios, en los casos que el alumno ya haya seleccionado previamente algunas evidencias, estas sern visualizadas, al igual que en las selecciones anteriores es requisito necesario haber creado y configurado el portafolio de producto.

Portafolio en lnea, Facultad de Educacin 4.4.8 PROCESO PARA GENERAR EL PORTAFOLIO DE PRODUCTO
5

98

Tiene el alumno un portafolio de producto

NO

Mostrar mensaje de error, voolver a paso (1)

SI

Mostrar formulario

Generar portafolio de producto

Mostrar formulario

Tiene facetas seleccionadas

SI

Generar men segn facetas seleccionadas en HTML

Generar comentarios en formato HTML

SI

Tiene comentarios seleccionados

Tiene evidencias seleccionados NO

Generar evidencias para el producto con formato HTML NO Comprimir todos los documentos HTML como sitio OFF-Line NO

Fin

(Figura 4.4.8) Diagrama de flujo para generar un portafolio off-line.

Portafolio en lnea, Facultad de Educacin

99

El proceso final de creacin del portafolio de producto consiste en reunir toda la informacin anteriormente solicitada, esto es, facetas a incluir, comentarios y evidencias, para posteriormente generar documentos HTML.

Cuando el proceso concluye, es necesario almacenar y empaquetar todos los documentos para hacer una descarga uniforme, para ello se comprime el portafolio (una carpeta) para ser bajados automticamente al PC del alumno.

En algunos casos esto puede tomar un tiempo considerable, para ello, se ha implementado una opcin de vista previa del portafolio de producto que es, una vista real de cmo quedar el portafolio pero todas las pginas aqui generadas siguen estando ligadas al servidor Web, a las evidencias almacenadas en el disco duro del servidor y a la base de datos.

Este proceso acelera la visualizacin del sitio final y permite al alumno realizar cambios rpidamente si es que as lo necesita o bien, bajar definitivamente una versin de su portafolio de producto navegable fuera de lnea y sin necesidad de estar conectado a al servidor Web.

Portafolio en lnea, Facultad de Educacin 4.4.9 PROCESO PARA LISTAR ELEMENTOS NUEVOS DEL ALUMNO
Inicio

100

Mostrar lista del curso

Listar curso asignado al profesor

Seleccionar alumno y recorrer facetas

La faceta posee comentarios nuevos

SI Mostrar comentarios y buscar comentarios en criterios SI El criterio tiene comentarios nuevos SI Mostrar rbol de elementos nuevos Mostrar comentarios del criterio y buscar evidencias NO

NO

NO

Mostrar mensaje que no existen elementos nuevos

Existe evidencia nueva en el criterio

SI

Mostrar evidencia su comentario critico

SI Fin

(Figura 4.4.9) Diagrama de flujo para visualizar elementos nuevos.


Una de las caractersticas del profesor es que puede corregir y revisar los portafolios de los alumnos, existe una interfaz sencilla que capta todos los elementos nuevos que crea el alumno, consulta las tablas de evidencias y comentarios pues cada vez que el profesor revisa un documento, queda registrado que elementos ha visto y cuales no.

Portafolio en lnea, Facultad de Educacin

101

4.5 DISEO DE ALMACENAMIENTO EN EL SERVIDOR

Se ha considerado para el almacenamiento de las evidencias (archivos fsicos en el servidor) una estructura estndar de carpeta que agrupa a todas las facetas y criterios asociados a las facetas, de esta forma, se obtiene la siguiente estructura jerrquica para el almacenamiento de las evidencias en el portafolio :

Curso (Sigla)

Usuario del curso

Faceta A

Criterio A1

Criterio A2

Criterio A3

Criterio A4

Faceta B

Criterio B1

Criterio B2

Criterio B3

Criterio B4

Faceta C

Criterio C1

Criterio C2

Criterio C3

Criterio C4

Faceta D

Criterio D1

Criterio D2

Criterio D3

Criterio D4

Criterio D5

Faceta X

Producto

Faceta A

Faceta B

Faceta C

Faceta D

Faceta X

(Figura 4.5) Diagrama jerrquico del almacenamiento de evidencias en disco.

Portafolio en lnea, Facultad de Educacin

102

CAPITULO ( V ) IMPLEMENTACION

Portafolio en lnea, Facultad de Educacin

103

5.1 IMPLEMENTACION DE LA BASE DE DATOS


A continuacin se describen las tablas que conformarn el modelo de datos segn el modelo relacional implementado en la figura (4.1) desarrollado con Power Designer. Para ello se ha hecho una breve descripcin de cada tabla, sus claves y la descripcin de cada campo, ello con el objeto de aclarar de una mejor forma el objetivo de cada una de las tablas en el sistema de portafolio en lnea.

TABLA

Entradas

DESCRIPCION Contiene las entradas, ya sean facetas o criterios con los cuales trabaja el portafolio. CAMPO
Id_entrada Nombre Descripcin

TIPO
Numrico Varchar Varchar

CLAVE
Primaria, nica

DESCRIPCION
Identificador de cada entrada. Contiene el nombre de la entrada. Contiene una descripcin de la entrada.

(Tabla 5.1.1) Tabla de entradas

TABLA

Perfiles

DESCRIPCION Contiene las configuraciones y los permisos de los usuarios para ingresar a su portafolio. CAMPO
Usuario Codigo_curso id_entrada

TIPO
Varchar Varchar Numrico

CLAVE
Fornea

DESCRIPCION
Nombre de usuario a identificar. Sigla del curso para el portafolio

Fornea

Identificador de cada entrada.

(Tabla 5.1.2) Tabla de perfiles

Portafolio en lnea, Facultad de Educacin


TABLA

104

Servidor

DESCRIPCION Contiene las rutas para acceder a la aplicacin si esta cambia de servidor. CAMPO
Ruta_servidor Ruta_archivos Ruta_internet

TIPO
Varchar Varchar Varchar

CLAVE

DESCRIPCION
Ruta de la aplicacin Web en el servidor Ruta de los archivos en el servidor Ruta de la aplicacin en Internet

(Tabla 5.1.3) Tabla servidor

TABLA

Control_acceso

DESCRIPCION Tabla histrica para registrar las visitas autentificadas al portafolio CAMPO
Usuario Salida Entrada tipo_usuario Ip

TIPO
Varchar Fecha-Hora Fecha-Hora Varchar Varchar

CLAVE

DESCRIPCION
Nombre de usuario autentificado Fecha y hora de salida en el sistema Fecha y hora de la entrada al sistema Tipo de usuario Nmero IP del host usuario

(Tabla 5.1.4) Tabla de control de acceso

TABLA

Carreras

DESCRIPCION Registra las carreras disponibles para realizar portafolios. CAMPO


id_carrera Nombre

TIPO
Numrico Varchar

CLAVE
Primaria, nica

DESCRIPCION
Identificador de la carrera Nombre de la carrera.

(Tabla 5.1.5) Tabla de carreras

Portafolio en lnea, Facultad de Educacin


TABLA

105

Cursos

DESCRIPCION Lista de los cursos disponibles para realizar portafolios CAMPO


Codigo_curso Semestre Descripcin Profesor Fecha_inicio Estado Foro

TIPO
Numrico Numrico Varchar Varchar Fecha Varchar Numrico

CLAVE
Primaria, Unica

DESCRIPCION
Sigla del curso para realizar portafolios Semestre en el cual se dicta el curso Nombre descriptivo del curso Profesor que dicta el curso Fecha en que se inicia el curso Estado del curso (Habilitado, Inhabilitado) ID de Foro, para futura conexin con el sitio EDUCA de la UC de Temuco.

(Tabla 5.1.6) Tabla de cursos

TABLA

Tipo_archivo

DESCRIPCION Almacena los tipos MIME e imgenes para mostrar iconos descriptivos de archivos subidos al portafolio como evidencias CAMPO
Tipo Imagen

TIPO
Varchar Binario

CLAVE
Primaria

DESCRIPCION
Tipo MIME para las evidencias Contenedor de la imagen como icono

(Tabla 5.1.7) Tabla de tipos de archivos

Portafolio en lnea, Facultad de Educacin


TABLA

106

Inscripciones

DESCRIPCION Almacena los datos de los alumnos inscritos para realizar portafolios. CAMPO
Usuario Rut Dv Nombre Apellidos Direccion Fono Email Ciudad Fecha Password Conexin Carrera

TIPO
Varchar Numrico Varchar Varchar Varchar Varchar Varchar Varchar Varchar Fecha Varchar Varchar Varchar

CLAVE
Fornea

DESCRIPCION
Nombre de usuario autentificado Numero de RUT del alumno Dgito verificador de RUT Nombre del alumno Apellidos del alumno Direccin del alumno Telfono del alumno Correo electrnico Ciudad Fecha de Inscripcin Contrasea Indicador de conexin Identificador de carrera del alumno

(Tabla 5.1.8) Tabla de inscripciones

Portafolio en lnea, Facultad de Educacin


TABLA

107

Usuarios

DESCRIPCION Registra los usuarios del sistema (Alumnos, Profesores y administrador) CAMPO
Usuario Rut Dv Nombre Apellidos Password Direccion Fono Emai Ciudad tipo_usuario

TIPO
Varchar Numrico Varchar Varchar Varchar Varchar Varchar Varchar Varchar Varchar Varchar

CLAVE
Primaria

DESCRIPCION
Nombre de usuario autentificado Numero de RUT del usuario Dgito verificador de RUT Nombre del usuario Apellidos del usuario Contrasea del usuario Direccin del usuario Telfono del usuario Correo electrnico del usuario Ciudad de residencia del usuario Tipo de usuario (Administrador, Profesor o Alumno)

Conexin

Varchar

Especifica si tiene conexin fuera de la Universidad

Id id_grupo id_carrera

Numrico Numrico Numrico Fornea

Identificador de usuario Identificador de grupo Identificador de la carrera a la que se encuentra asociado

(Tabla 5.1.9) Tabla de usuarios

Portafolio en lnea, Facultad de Educacin


TABLA

108

Port_procesos

DESCRIPCION Almacena referencias y comentarios de las evidencias del portafolio de proceso. CAMPO
Usuario Codigo_curso archivo faceta criterio fecha_upload tamano descripcin comentario_prof nombre_archivo tipo_archivo comentario_alum leido_por_prof leido_por_alum f_coment_prof f_coment_alum

TIPO
Varchar Varchar Varchar Varchar Varchar Fecha Numrico Varchar Texto Varchar Varchar Texto Numrico Numrico Fecha Fecha

CLAVE
Fornea Fornea

DESCRIPCION
Nombre de usuario dueo de la evidencia Curso al que esta asociada la evidencia Nombre y ruta completa del archivo Faceta en la cual esta almacenada Criterio en la cual esta almacenada Fecha de subida de la evidencia Tamao en bytes de la evidencia Descripcin corta de la evidencia Comentario crtico del profesor Nombre del archivo

Fornea

Tipo MIME del archivo Comentario crtico del alumno Indicador si ha sido ledo por el profesor Indicador si ha sido ledo por el alumno Fecha del comentario del profesor Fecha del comentario del alumno

(Tabla 5.1.10) Tabla de portafolio de procesos

Portafolio en lnea, Facultad de Educacin


TABLA

109

Comentarios

DESCRIPCION Almacena los comentarios crticos de los alumnos CAMPO


id_comentario Usuario Codigo_curso Destino Comentario_alum Titulo_alum Comentario_prof Titulo_prof f_coment_alum f_coment_prof Leido_por_prof Leido_por_alum

TIPO
Numrico Varchar Varchar Varchar Texto Varchar Texto Varchar Fecha Fecha Numrico Numrico

CLAVE
Primaria Fornea Fornea

DESCRIPCION
Identificador nico del comentario Nombre del usuario Curso para el que realiza el portafolio Destino del comentario (Faceta o Criterio) Comentario crtico del alumno Ttulo del comentario del alumno Comentario crtico del profesor Ttulo del comentario del profesor Fecha del comentario del alumno Fecha del comentario del profesor Indica si fue ledo el comentario por el profesor Indica si fue ledo el comentario por el alumno

(Tabla 5.1.11) Tabla de comentarios

TABLA

Pro_facetas

DESCRIPCION Almacena las facetas que el alumno selecciona para conformar su portafolio de producto CAMPO
id_producto Faceta Titulo Foto_opc

TIPO
Numrico Varchar Varchar Varchar

CLAVE
Fornea

DESCRIPCION
Identificador del portafolio de producto Faceta seleccionada para el portafolio Ttulo opcional para la faceta Ruta de una fotografa opcional

(Tabla 5.1.12) Tabla de producto para seleccin de facetas

Portafolio en lnea, Facultad de Educacin


TABLA

110

Pro_datos

DESCRIPCION Almacena los datos principales del portafolio de producto navegable off-line CAMPO
id_producto Usuario Codigo_curso Titulo sub_titulo Logo_instit Foto_opc Nombre_instit Descrip_instit Direccion Ciudad Comuna Telefono Fax Email Curso Profesor Profesor_guia

TIPO
Numrico Varchar Varchar Varchar Varchar Varchar Varchar Varchar Texto Varchar Varchar Varchar Varchar Varchar Varchar Varchar Varchar Varchar

CLAVE
Primaria Fornea Fornea

DESCRIPCION
Identificador nico del portafolio de producto Nombre del usuario Cdigo del curso en el portafolio Ttulo del portafolio de producto Subttulo del portafolio de producto Ruta del logo de la institucin Fotografa opcional Nombre de la organizacin en la cual trabaj Descripcin de la institucin Direccin de la institucin Ciudad de la institucin Comuna de la institucin Telfono de la institucin Fax de la institucin Correo electrnico de la institucin Curso en el cual se desempe Profesor con el cual trabaj Profesor gua de su portafolio

(Tabla 5.1.13) Tabla de datos para el portafolio de producto

Portafolio en lnea, Facultad de Educacin


TABLA

111

Pro_evidencias

DESCRIPCION Almacena las referencias de las evidencias y comentarios que son seleccionados para el portafolio de producto. CAMPO
id_evidencia id_producto Usuario Codigo_curso Archivo Faceta Criterio Fecha_upload Tamano Descripcion Nombre_archivo tipo_archivo Comentario_alum Leido_por_alum f_coment_alum

TIPO
Numrico Numrico Varchar Varchar Varchar Varchar Varchar Fecha Numrico Varchar Varchar Varchar Varchar Numrico Fecha

CLAVE
Primaria Fornea Fornea Fornea

DESCRIPCION
Identificador nico para la evidencia Identificador del portafolio de producto Nombre de usuario Curso para el que desarrolla el portafolio Ruta del archivo el servidor Faceta de la evidencia Criterio a la que pertenece la evidencia Fecha de subida de la evidencia Tamao de la evidencia Descripcin de la evidencia Nombre de la evidencia

Fornea

Tipo MIME de la evidencia Comentario crtico de la evidencia Indica si fue ledo por el alumno Fecha de creacin del comentario del alumno

(Tabla 5.1.14) Tabla de evidencias para el portafolio de producto

Portafolio en lnea, Facultad de Educacin


TABLA

112

Pro_comentarios

DESCRIPCION Almacena los comentarios seleccionados por el alumno para su portafolio de producto. CAMPO
id_comentario id_producto Usuario Codigo_curso Destino Comentario_alum Titulo_alum f_coment_alum Foto_opc

TIPO
Numrico Numrico Varchar Varchar Varchar Texto Varchar Fecha Varchar

CLAVE
Primaria, Unica Fornea Fornea Fornea

DESCRIPCION
Identificador nico de comentario Identificador del portafolio de producto asociado Nombre de usuario Sigla del curso para el portafolio Indica si es comentario para faceta o criterio Comentario del alumno Ttulo del comentario Fecha de creacin de comentario Fotografa o imagen opcional

(Tabla 5.1.15) Tabla de comentarios para el portafolio de producto

Portafolio en lnea, Facultad de Educacin

113

5.2 IMPLEMENTACION DE INTERFACES


En el caso de la implementacin de interfaces Web para la aplicacin de portafolio, es necesario considerar los aspectos requeridos en los siguientes puntos del capitulo II de Anlisis y capitulo IV de diseo, los cuales son los siguientes :

5.2.1 Interfaz amigable, que simule o parezca un portafolio Para cumplir con este requisito, se trabaj en el diseo grfico de una interfaz basada en una especie de archivador, con las opciones generales de la aplicacin en los casos que los visitantes no estn registrador en el sistema de construccin de portafolios en lnea, el diseo fue realizado con la herramienta Fireworks MX de Macromedia.

Men de botones comunes de la aplicacin.

Area de trabajo para despliegue de pginas de contenido.

(Figura 5.2.1 ) Interfaz bsica de trabajo para el portafolio

Portafolio en lnea, Facultad de Educacin

114

5.2.2 Interfaz informe al usuario respecto de la faceta o criterio en la cual va a trabajar.

Cuando el alumno ingresa al sistema, es necesario que este informado constantemente de la faceta o criterio en el cual est trabajando, para ello, a la interfaz tipo archivador, se ha agregado un sistema de pestaas, basadas en colores para cada faceta, de esta forma, el alumno puede tambin identificar su rea de trabajo segn el color seleccionado.

(Figura 5.2.2) Interfaz con pestaas e informacin de trabajo para un alumno

Portafolio en lnea, Facultad de Educacin 5.2.3 Edicin de los comentarios crticos debe ser amigable.

115

Otra de las caractersticas necesarias requeridas es que la edicin de cualquier comentario crtico sea potenciado con un editor de texto enriquecido, esto es, que tanto el alumno o el profesor puedan formatear, colorear y aplicar distintos atributos a los textos de los comentarios, desde este punto de vista, se opt por buscar en la Web un editor de texto enriquecido de carcter gratuito, la solucin fue el software htmlArea versin 2.03 de la empresa Interactive Tools ( www.interactivetools.com ), basado en libreras Javascript 1.2 compatibles con Internet Explorer 5.5.

Barra de herramientas para la edicin de textos con formato

(Figura 5.2.3) Interfaz para texto enriquecido con HTML ofrecido por Interactive Tools

Portafolio en lnea, Facultad de Educacin 5.2.4 Diseo de la interfaz de usuario.

116

Para la construccin de todas las interfaces de formularios HTML de la aplicacin fue necesario utilizar una herramienta de diseo rpido ( RAD ) puesto que aunque es posible escribir el cdigo en un editor de texto simple, esto puede llevar mucho tiempo, para ahorrar tiempo en esta labor, se ha optado por utilizar la herramienta Adobe GoLive 5.0 , este software permite crear pginas HTML y mesclarlas fcilmente con cdigos Javascript, PHP, y Hojas de estilo en cascada CSS, que son en general todos los requisitos para construir interfaces Web en el caso del portafolio en lnea.

(Figura 5.2.4) Editor RAD para construccin de interfaces HTML y PHP

Portafolio en lnea, Facultad de Educacin 5.2.5 Implementacin de interfaz para listar y almacenar evidencias.

117

Control para examinar archivos y guardar evidencias en el criterio y faceta del alumno.

Nombres de evidencias con hipervinculos para poder visualizar las evidencias y crear o editar comentarios crticos a ellas.

Listado detallado de las evidencias, si existe comentario crtico, es posible ver en la misma pgina el comentario seleccionado.

Iconos asociados a la evidencia, existen 3 tipos, icono de archivo, icono de comentario del alumno e icono de comentario del profesor, estos dos ltimos solo aparecen cuando alguno de ellos escribe un comentario para la evidencia.

Casillas y botones para que el alumno pueda eliminar alguna de las evidencias que no necesite.

(Figura 5.2.5) Implementacin de interfaz para listar y almacenar evidencias.

Portafolio en lnea, Facultad de Educacin 5.2.6 Implementacin de interfaz para visualizar evidencias.

118

Espacio para el comentario del profesor Este espacio no es editable por el alumno.

Edicin de un comentario crtico, note que en esta interfaz se implementa el editor RTF de Interactive Tools y se integra a la aplicacin.

Evidencia almacenada en el servidor, en este caso, un documento Word.

(Figura 5.2.6) Implementacin de interfaz para visualizar evidencias.

Portafolio en lnea, Facultad de Educacin 5.2.7 Implementacin de interfaz listar comentarios crticos.

119

(Figura 5.2.7) Implementacin de interfaz para listar comentarios crticos.

5.2.8 Implementacin de interfaz editar comentarios crticos.

(Figura 5.2.8) Implementacin de interfaz editar comentarios crticos.

Portafolio en lnea, Facultad de Educacin 5.2.9 Implementacin de interfaz de men de portafolio de producto.

120

(Figura 5.2.9) Implementacin de men de portafolio de producto.

Portafolio en lnea, Facultad de Educacin 5.2.10 Implementacin de interfaz para personalizacin de un

121

portafolio de producto

( Figura 5.2.10) Implementacin de interfaz para personalizacin de un portafolio de producto

Portafolio en lnea, Facultad de Educacin 5.2.11 Implementacin de interfaz para seleccin de facetas.

122

(Figura 5.2.11) Implementacin de interfaz para seleccin de facetas.

Portafolio en lnea, Facultad de Educacin 5.2.12 Implementacin de interfaz para seleccin de comentarios.

123

hipervnculos que permiten desplegar los comentarios en la misma pgina, adems permiten ver el cuadro de examinar archivos para asociar una imagen al comentario

Vista de un comentario crtico y una imagen asociada a el que tambin es posible desvincular haciendo click en la casilla dispuesta para tal fin.

( Figura 5.2.12 ) Implementacin de interfaz para seleccin de comentarios.

Portafolio en lnea, Facultad de Educacin 5.2.13 Implementacin de interfaz para seleccin de evidencias.

124

( Figura 5.2.13 ) Implementacin de interfaz para seleccin de evidencias.

Portafolio en lnea, Facultad de Educacin 5.2.14

125

Implementacin de interfaz para generacin de portafolio de

producto navegable off-line.

( Figura 5.2.14 ) Implementacin de interfaz para generacin de portafolio de producto navegable off-line.
5.2.15 Vista preliminar de un portafolio de producto finalizado.

( Figura 5.2.15 ) Vista preliminar de un portafolio de producto finalizado.

Portafolio en lnea, Facultad de Educacin 5.2.16

126

Implementacin de interfaz para listar alumnos de un curso.

Lista con hipervinculos que permiten revisar rpidamente los portafolios de cada uno de los alumnos del curso.

( Figura 5.2.16 ) Implementacin de interfaz para listar alumnos de un curso.

5.2.17 alumnos.

Implementacin de interfaz para configurar un portafolio de

( Figura 5.2.17) Implementacin de interfaz para configurar un portafolio de alumnos.

Portafolio en lnea, Facultad de Educacin 5.2.18

127

Implementacin de interfaz para visualizar elementos nuevos

de un alumno.

.......

(Figura 5.2.18) Implementacin de interfaz para visualizar elementos nuevos de un alumno.

Portafolio en lnea, Facultad de Educacin 5.2.19 Implementacin de Interfaz para administracin de tablas

128

(Figura 5.2.19) Mantenedor de cursos

(Figura 5.2.20) Ingreso de datos usando un mantenedor de tablas

Portafolio en lnea, Facultad de Educacin

129

5.3 IMPLEMENTACION DE PROCESOS

Dadas las caractersticas del sistema de portafolio en lnea, es necesario realizar la mayor parte de los procesos de acceso a datos y archivos en el servidor, para ello, se ha utilizado el lenguaje PHP que es uno de los ms populares y utilizados en los servidores Web Linux, por otra parte se encuentra que es necesario realizar algunas validaciones en el cliente o navegador Web, en este otro caso se ha utilizado el lenguaje Javascript .

Clientes
Procesos en el cliente

Servidor Web Apache - Linux


Procesos en el Servidor

Servidor de base de datos mySQL

PC torre

INTERNET Portafolio Cliente Portatil Servidor WEB PHP Base de datos

Cliente MAC

(Figura 5.3)

Ilustracin del modelo de tres niveles y la ejecucin de procesos cliente/servidor

Portafolio en lnea, Facultad de Educacin 5.3.1 Procesos en el servidor

130

Como se ha dicho anteriormente los procesos del servidor corresponden e este caso a todos los programas PHP que son pre-procesados en el servidor Web y devueltos como un documento HTML navegable por el cliente, de esta forma, en este captulo veremos los procesos ms relevantes mencionados en el captulo IV, que son los siguientes : - Almacenar evidencias en el servidor - Listar evidencias - Editar un comentario crtico - Creacin de un portafolio de producto navegable off-line

Portafolio en lnea, Facultad de Educacin 5.3.1.1 Almacenar evidencias en el servidor

131

Una de las tareas frecuentes en la confeccin del portafolio es aquella de subir o almacenar los archivos en el servidor, para ello, se ha hecho la siguiente consideracin: si el archivo ya existe en la base de datos, ste es eliminado de ella y se vuelve a crear una nueva entrada para l, ello con el fin de actualizar el viejo archivo en su totalidad.

$dir = $path ; if ( isset($submit) ) { set_time_limit(0); // Limita el timeout para docs grandes $SQL_delete="DELETE FROM port_procesos WHERE usuario='$sess_user' AND codigo_curso='$sess_curso' AND Faceta='faceta_a' AND criterio='a1' AND Nombre_archivo='$userfile_name'"; mysql_query($SQL_delete,$link); $CopiarArchivo = copy($userfile, $dir.$userfile_name); if ( !is_uploaded_file($userfile) ) { echo "<table border='0' cellpadding='3' width='465'>"; echo "<tr height='20'><td bgcolor='#cc3366' height='20'>"; echo "<div align='center'> <font color='#FFFFFF'> ERROR : El archivo &quot;<b> $userfile_name; &quot; </b>no pudo ser copiado al portafolio.</font> </div></td></tr></table>"; } else { $path = $path.$userfile_name; $fecha = date("d/m/Y"); $filesize = filesize($userfile); $SQLInsert= "INSERT INTO port_procesos (usuario, codigo_curso, archivo,faceta, criterio,fecha_upload, tamano,descripcion,nombre_archivo,tipo_archivo) VALUES ('$sess_user','$sess_curso','$path','faceta_a', 'a1','$fecha', '$filesize','$descripcion','$userfile_name','$userfile_type')"; mysql_query( $SQLInsert,$link ); echo "<table width='465' cellpadding='3' bordercolor='#0000FF'> <tr height='20'> <td bgcolor='#FFFF00' height='20'> <div align='center'> <font color='#0000FF' size='2'> <strong>El archivo : $userfile_name , fu&eacute; copiado al portafolio.</strong></font></div> </td></tr></table>\n\n\"; echo "<META HTTP-EQUIV='Refresh' CONTENT='3'>"; } unset($submit); }

(Tabla 5.3.1.1) Almacenar evidencias en el servidor.

Portafolio en lnea, Facultad de Educacin

132

5.3.1.2

Listar evidencias para un criterio

Este proceso fue considerado de una dificultad menor, ya que, la mayor complejidad de este proceso se encuentra en verificar que efectivamente el alumno tenga asignado una evidencia. Este proceso lista todos los archivos del criterio seleccionado y comprueba su autenticidad en la base de datos, tambien es necesario rescatar la ruta base desde donde se encuentran los archivos, para ello, se utilizan consultas SQL que permiten extraer la ruta base de los archivos y a la vez concatenarla con el cdigo del curso seleccionado, el usuari, la faceta por la cual el alumno esta navegando y el criterio en el cual el usuario ha decidido listar o visualizar.

session_start(); $Qry_path $result_path $fila2 $path $path $directorio = = = = = "SELECT ruta_archivos FROM servidor"; mysql_query($Qry_path,$link); mysql_fetch_array($result_path); $fila2["ruta_archivos"]; $path."sem".$semestre."/".$sess_curso."/".$sess_user. "/".$faceta."/".$criterio; = dir($path);

(Tabla 5.3.1.2) Obtencin de la ruta de las evidencias almacendas.

En este cdigo se obtiene la ruta en el servidor, note que la ruta base est almaceda en una tabla, ello con el propsito de mejorar la migracin de la aplicacin si esta es movida de carpeta o de servidor en un futuro prximo. Note tambin que las variables $sess_user y $sess_curso, son variables de sessin que estn disponibles para todas las pginas que usen la funcin session_start().

Portafolio en lnea, Facultad de Educacin

133

Una vez obtenida la ruta de directorio donde se encuentran las evidencias, es necesario listar los archivos, pero a la vez efectuar la comprobacin en la base de datos, esto es, para evitar posibles errores que puedan suceder al subir archivos al servidor u otro problema de ndole similar.
<? $contador = 0; while ($archivo = $directorio->read()) { if (chop($archivo) == "." || chop($archivo) == "..") { // Estos son los subdirectorios que no se deben mostrar } else { $contador = $contador +1; $archivo = chop($archivo); $cons_arch = "SELECT * FROM port_procesos WHERE usuario = '$sess_user' AND codigo_curso = '$sess_curso' AND faceta = '$faceta' AND criterio = '$criterio' AND nombre_archivo='$archivo' ORDER BY fecha_upload"; $result = mysql_query($cons_arch,$link); $fila_arch = mysql_fetch_array($result); if ($fila_arch["nombre_archivo"] <> "" ) { $nombre = $fila_arch["nombre_archivo"]; $ruta_http = $path.$fila_arch["nombre_archivo"]; $tipo_archivo = $fila_arch["tipo_archivo"]; $ruta_archivo = $fila_arch["archivo"]; $archivo2 = $fila_arch["nombre_archivo"]; $usuario = $fila_arch["usuario"]; $codigo_curso = $fila_arch["codigo_curso"]; $faceta = $fila_arch["faceta"]; $criterio = $fila_arch["criterio"]; $contador = $contador + 1; $abrir = $url.$archivo; ?> .... // Mostrar las variables en una tabla HTML <? } } $directorio->close(); ?> } // ....

(Tabla 5.3.1.3) Listar las evidencias de un directorio.

En este cdigo se puede apreciar que primero se obtienen los archivos mediante la funcin read() (funcin de directorios), y luego, segn los datos obtenidos, son buscados en la tabla de portafolio de proceso, mediante una consulta parametrizada, una vez obtenidos los datos, estos se muestran en una tabla HTML.

Portafolio en lnea, Facultad de Educacin 5.3.1.3 Editar un comentario crtico

134

Editar un comentario bsicamente consiste en cargar un comentario creado por un alumno y permitirle a este poder modificarlo, para realizar esta tarea, lo ms significativo es realizar la bsqueda del comentario en la tabla y luego desplegarlo en un rea de texto, cabe notar que el proceso debe distinguir quien edita el comentario, si es el alumno o el profesor, para ello, se pasa a la pgina una variable de control que permite discriminar entre ambos.
<? $QRY_Archivo = "SELECT comentario_alum, titulo_alum FROM comentarios WHERE id_comentario='$id'"; $Resultado = mysql_query($QRY_Archivo, $link); $Fila_arch = mysql_fetch_array($Resultado); $comentario = $Fila_arch["comentario_alum"]; $titulo = $Fila_arch["titulo_alum"]; if ($control=='0') // Profesor { echo "<b><p style='font-size: 12pt; font-family: geneva ; letter-spacing: 1px;'>Comentario del Profesor : </p></b>"; } if ($control=='1') // Alumno { echo "<b><p style='font-size: 12pt; font-family: geneva ; letter-spacing: 1px;'>Comentario del Alumno : </p></b>"; } if ($control=='3') // Nuevo comentario { echo "<b><br><p style='font-size: 12pt; font-family: geneva ; letter-spacing: 1px;'>Ingrese nuevo comentario crtico : </p></b>"; } ?> <form method="post" action="update_comentario_critico.php" name="frm_guardar"> <hr><br><b>Ingrese T&iacute;tulo al Comentario Cr&iacute;tico :<br> <br></b> <input type="text" name="titulo" value="<?=$titulo?>" size="70" maxlength="50"> <b></b><br><hr><br> <? // Configuramos las variables de entorno ?> <input type="hidden" value="<?=$sess_user;?>" name="usuario"> <input type="hidden" value="<?=$sess_curso;?>" name="codigo_curso"> <input type="hidden" value="<?=$destino;?>" name="destino"> <input type="hidden" value="<?=$id;?>" name="id"> <textarea name="txt_documento" value="<?=$comentario;?>" style="width:100%; height:200" cols="75" rows="7"><?=$comentario;?></textarea>

(Tabla 5.3.1.4) Crear o editar un comentario crtico

Portafolio en lnea, Facultad de Educacin 5.3.1.4 Crear un portafolio de producto navegable off-line

135

Este proceso es uno de los que ms dificultad present para el alumno, dado que se necesitaba convertir todas las pginas dinmicas con acceso a la base de datos y a los documentos almacenados en el servidor en un conjunto de pginas estticas HTML, para ello, se opt por utilizar una serie de plantillas o pginas PHP que no referenciaban al servidor ni a las evidencias en servidor mismo, de esta forma, las referencias se crean dinmicamente, pero a pginas HTML segn las opciones previas que haya seleccionado el alumno, aparentemente lo que es algo sencillo adquiere ms complejidad an pues es necesario que todos los vnculos correspondan y coincidan con el vnculo a la pgina seleccionada que tambin se crear de forma dinmica.

Para solucionar estos problemas se opt por procesar primero las pginas correspondientes al men principal, luego de las facetas, una vez realizado esto, se generan todas las pginas de los comentarios crticos y finalmente las pginas de las evidencias, sin olvidar que las pginas procesadas son especialmente diseadas para no vincularse ni a la base de datos ni al servidor de archivos. Cabe notar que los archivos o evidencias seleccionadas por el alumno son movidos a la estructura de archivos de la carpeta producto como fue mostrado en la Figura 4.5

Diagrama jerrquico del

almacenamiento de evidencias en disco en la etapa de diseo, as, todos los vnculos


a los archivos de las pginas HTML son a estas carpetas y no a las rutas del servidor mismo, ello para lograr el carcter off-line.

Portafolio en lnea, Facultad de Educacin

136

Una vez creadas las pginas HTML, es necesario que el alumno necesite descargar este conjunto de elementos ( pginas HTML, evidencias, imgenes y otros ), es entonces necesario empaquetar todos estos archivos y lo ideal es comprimirlos para que el proceso de descarga sea rpido, en este punto hay que considerar que el tamao final del portafolio de producto off-line puede ser demasiado grande, lo que hace imperante que este paquete de archivos sea comprimido. Dentro de los posibles formatos de compresin y empaquetado de archivos linux estn los formatos .TAR, .Z y GZ que son relativamente conocidos por los usuarios Linux y UNIX, sin embargo se opto por conseguir la utilidad de compresion ZIP y UNZIP para linux para generar un paquete comprimido en dicho formato, pues es el ms extendido y usado por los usuarios Windows.

Una vez decidido comprimir con formato ZIP la carpeta de producto del portafolio, se utiliza una secuencia de comandos linux para llamar a la utilidad de compresin zip, esto se logra mediante llamadas a la funcin exec() de PHP, que es similar al la funcin system() del lenguaje C.

Finalmente, el proceso de creacin del portafolio de producto off-line genera un enlace al documento ZIP y una pgina que descarga automticamente el archivo para que el alumno lo guarde en su computador.

Portafolio en lnea, Facultad de Educacin

137

// Copia la carpeta de imgenes estaticas de la plantilla // y los archivos HTML a la carpeta de portafolio, // estos archivos ya estn creados previamente $comando $resultado $comando $resultado $comando $resultado $comando $resultado $comando $resultado $comando $resultado // // // // // = = = = = = = = = = = = "cp -R -u autorun.bat $path"; system($comando); "cp R -u autorun.inf $path"; system($comando); "cp -R -u uct.ico $path"; system($comando); "cp -R -u images $path"; system($comando); "cp -R -u banner_html.html ".$path."banner.html"; system($comando); "cp -R -u index_html.html ".$path."index.html"; system($comando);

Crea el menu de usuario para el portafolio, note que se utilizan plantillas PHP especialmente escritas para generar una salida HTML limpia sin referencias a otras pginas PHP, adems todas los parmetros son pasados por metodo GET = $url."producto/plantillas/basica/menu_html.php? sess_user=".$sess_user."&sess_curso=".$sess_curso; = $path."menu.html"; = fopen ($archivo, "r"); = fopen ($arch_sal,"w+");

$archivo $arch_sal $pagina $output

while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); } // Crea la portada del portafolio pasando parametros por metodo GET $archivo = $url."producto/plantillas/basica/portada_html.php? sess_user=".$sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."portada.html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); }

(Tabla 5.3.1.5) Proceso para crear el men del portafolio de producto

Note que el sistema de procesar las pginas y generar HTML es mediante una plantilla previamente escrita, los parametros para estas pginas son pasados a todas las plantillas mediante el mtodo GET, la salida HTML se produce mediante el comando fopen, leyendo la salida procesada de la plantilla y escribiendo en un archivo de salida la pgina HTML.

Portafolio en lnea, Facultad de Educacin

138

// Crea la faceta A personalizada del portafolio $archivo = $url."producto/plantillas/basica/faceta_a_html.php? sess_user=".$sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."faceta_a.html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); } // Crea la faceta B personalizada del portafolio $archivo = $url."producto/plantillas/basica/faceta_b_html.php? sess_user=".$sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."faceta_b.html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); } // Crea la faceta C personalizada del portafolio $archivo = $url."producto/plantillas/basica/faceta_c_html.php? sess_user=".$sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."faceta_c.html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); } // Crea la faceta D personalizada del portafolio $archivo = $url."producto/plantillas/basica/faceta_d_html.php? sess_user=".$sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."faceta_d.html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); } // Crea la faceta X personalizada del portafolio $archivo = $url."producto/plantillas/basica/faceta_x_html.php? sess_user=".$sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."faceta_x.html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); }

(Tabla 5.3.1.6) Proceso para crear las facetas del portafolio de producto

De forma similar a la creacin de los mens, las facetas se generan a partir de plantillas, que son procesadas mediante las funcines fopen(), fgets() y fwrite().

Portafolio en lnea, Facultad de Educacin

139

// Crea las pginas principales de listas de comentarios // para la faceta A $archivo = $url."producto/plantillas/basica/comentarios_fa_html.php? sess_user=".$sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."comentarios_fa.html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); } //--------------------------------------------------------------// Se crean los otros comentarios de forma similar a la faceta A // para las facetas B,C,D y X //--------------------------------------------------------------// // // // // Creacion de los archivos de comentarios de la faceta A Aca se commienzan a buscar todos los comentarios seleccionados por el alumno para la faceta, note que se generan paginas HTML con un nombre que identifica el comentario procesado, esto es para que no se repitan los nombres de archivo

$sql_comentarios = "SELECT * FROM pro_comentarios WHERE id_producto = $sess_producto AND destino LIKE 'a%' ORDER BY destino"; $res_comentarios = mysql_query($sql_comentarios,$link); $contador = 0; while ( $fila = mysql_fetch_object($res_comentarios) ) { $archivo = $url."producto/plantillas/basica/ver_comentario_fa_html.php? id_comentario=$fila->id_comentario"."&sess_user=". $sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."ver_comentario_fa_".$fila->id_comentario.".html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); } } fclose ($pagina); fclose ($output); //--------------------------------------------------------------// De forma similar a la faceta A, se procesan los archivos de // comentarios para las facetas B,C,D y X //---------------------------------------------------------------

(Tabla 5.3.1.7) Proceso para crear los comentarios del portafolio de producto

Siguiendo la lnea de los procesos anteriores para generar las pginas HTML, se han utilizado plantillas, pero a diferencia de los procesos anteriores, los comentarios como tal, se generan a partir de un nombre de pgina ms el ID del comentario generado.

Portafolio en lnea, Facultad de Educacin

140

// Crea la lista de las evidencias de la faceta A $archivo = $url."producto/plantillas/basica/evidencias_fa_html.php?sess_user=" .$sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."evidencias_fa.html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); while (!feof($pagina)) { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); } //--------------------------------------------------------------// Se crean las otras paginas de listas de evidencias de forma similar // a la faceta A para las facetas B,C,D y X //--------------------------------------------------------------// Recorre las evidencias almacenadas en la tabla y se generan las // pginas que contienen la referencia a la evidencia y su comentario while ( $fila = mysql_fetch_object($res_evidencias) ) { $archivo = $url."producto/plantillas/basica/frame_evidencia_html.php?faceta=" .$fila->faceta."&id=".$fila->id_evidencia."&sess_user=" .$sess_user."&sess_curso=".$sess_curso; $arch_sal = $path."frame_evidencia_".$fila->id_evidencia.".html"; $archivo2 = $url."producto/plantillas/basica/com_evidencia_html.php? faceta=".$fila->faceta."&id=".$fila->id_evidencia ."&sess_user=".$sess_user."&sess_curso=".$sess_curso; $arch_sal2 = $path."com_evidencia_".$fila->id_evidencia.".html"; $pagina = fopen ($archivo, "r"); $output = fopen ($arch_sal,"w+"); $pagina2 = fopen ($archivo2, "r"); $output2 = fopen ($arch_sal2,"w+"); while (!feof($pagina)) // Crea la pagina de los frames { $buffer = fgets($pagina, 4096); fwrite($output, $buffer); } while (!feof($pagina2)) // Crea los comentarios que va dentro de los frames { $buffer = fgets($pagina2, 4096); fwrite($output2, $buffer); } fclose ($pagina); fclose ($output); fclose ($pagina2); fclose ($output2); }

(Tabla 5.3.1.8) Proceso para crear las pginas de evidencias del portafolio de producto

Este mdulo genera una pgina compuesta por frames, en un frame se visualizar el comentario del alumno y en el otro se visualizar la evidencia.

Portafolio en lnea, Facultad de Educacin

141

//--------------------------------------------------------------------------// Aqui se comprime el portafolio de producto //--------------------------------------------------------------------------$archivo = $path."compresor.rc"; $arch_zip = $path."pproducto.zip"; if ( file_exists ($arch_zip) ) { exec("rm $arch_zip"); } // Se crea un archivo BATCH para ser procesado por el sistema, este archivo // lleva las instrucciones para comprimir la carpeta de portafolio de producto $batch = fopen($archivo ,"w+"); fwrite($batch, "# Compresor temporal para el portafolio de producto \n", 1024); fwrite($batch, "# ------------------------------------------------- \n", 1024); fwrite($batch, "cd $path \n", 1024); fwrite($batch, "zip -r -D pproducto.zip . -i \*.* \n", 1024); fwrite($batch, "# ------------------------------------------------- \n", 1024); fclose($batch); exec("chmod +x $archivo"); exec($archivo); exec($archivo); $url_zip = $url."ano/2003/sem".$semestre."/".$sess_curso."/".$sess_user ."/"."producto/pproducto.zip";

(Tabla 5.3.1.9) Proceso comprimir la carpeta de producto.

Este mdulo crea un archivo por lotes para linux, en su contenido, se encuentran las lneas necesarias para comprimir en formato ZIP la carpeta del usuario y entregar el link para que este archivo sea descargado por el alumno .

Portafolio en lnea, Facultad de Educacin 5.3.2 Procesos en el cliente

142

Los procesos en el cliente corresponden a pequeas sub rutinas diseadas en el lenguaje Javascript para satisfacer una serie de validaciones y mejoras en la visualizacin de las pginas de la aplicacin, entre ellas, veremos las siguientes - Cdigo para cargar el editor RTF - Validar nombres de archivo compatibles Windows/Linux - Chequeo de casillas de verificacin para eliminar evidencias

Portafolio en lnea, Facultad de Educacin 5.3.2.1 Cdigo para cargar el editor RTF

143

// Validaciones para los distintos navegadores _editor_url = ""; var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]); if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; } if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; } if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; } if (win_ie_ver >= 5.5) { document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"'); document.write(' language="Javascript1.2"></scr' + 'ipt>'); } else { document.write ('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); } // Se debe crear var config = new config.width config.height config.bodyStyle config.debug un objeto de configuracin para el editor RTF Object(); = "100%"; = "100px"; = 'background-color: white; font-family: "Verdana"; font-size: x-small;'; = 0;

// Se configura la barra de herramientas con los botones necesarios config.toolbar = [ ['fontname'], ['fontsize'], ['linebreak'], ['bold','italic','underline','separator'], ['strikethrough','subscript','superscript','separator'], ['justifyleft','justifycenter','justifyright','separator'], ['OrderedList','UnOrderedList','Outdent','Indent','separator'], ['forecolor','backcolor','separator'] ]; config.fontnames = { "Arial": "Courier New": "Comic Sans": "Georgia": "Impact": "Tahoma": "Times New Roman": "Verdana": "Arial, Helvetica, sans-serif", "Courier New, Courier, mono", "Comics Sans", "Georgia, Times New Roman, Times, Serif", "Impact", "Tahoma, Arial, Helvetica, Sans-Serif", "Times New Roman, Times, Serif", "Verdana, Arial, Helvetica, sans-serif" };

config.fontsizes = { "1 (8 pt)": "1", "2 (10 pt)": "2", "3 (12 pt)": "3", "4 (14 pt)": "4", "5 (18 pt)": "5", "6 (24 pt)": "6", "7 (36 pt)": "7" }; config.fontstyles = [ { name: "Cabezera", className: "headline", classStyle: "font-family: arial black, arial; font-size: 28px; letter-spacing: -2px;" }, { name: "Arial rojo", className: "headline2", classStyle: "font-family: arial black, arial; font-size: 12px; letter-spacing: -2px; color:red" }, { name: "Verdana azul", className: "headline4", classStyle: "font-family: verdana; font-size: 18px; letter-spacing: -2px; color:blue" } ];

(Tabla 5.3.2.1 ) Cdigo para cargar el editor RTF

Portafolio en lnea, Facultad de Educacin 5.3.2.2 Validar nombres de archivo compatibles Windows/Linux

144

function validar_arch(arch_upload) { // Lista de los archivos a comparar existentes en el Criterio var lista_arch = new Array(); repetido = false; // Indica si el archivo a subir esta repetido error_char = false; // Indica si hay un error en caracteres // Aqui obtenemos solo el nombre del archivo que vamos a subir arch_esc = escape(arch_upload); // Buscamos el ultimo "\" en sec. Escape pos_slash = arch_esc.lastIndexOf("%5C"); arch_valida = arch_esc.substring( pos_slash+3, arch_esc.length); arch_valida = unescape(arch_valida); // if if if if if if if if if if // // Se validan los caracteres que no son compatibles entre Windows y Linux ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } ( arch_valida.lastIndexOf("") != -1 ) { error_char = true; } .... La lista contina con los otros caracteres no vlidos

for (i = 0; i < lista_arch.length ; i++) { if ( arch_valida == lista_arch[i] ) { repetido = true } } if (repetido) { ok = confirm(" El archivo que va a subir ya se encuentra en el portafolio, Est seguro que desea reemplazar el archivo ?") if ( ok ) { return true; // va ha hacer el submit } else { return false; // no hace el submit } if (error_char) { alert("El archivo que va a subir tiene caracteres (letras) no validas, por favor cambie el nombre de su archivo.") return false; } if ( ( repetido == false) && (error_char== false)) { return true; } }

( Tabla 5.3.2.2 ) Validar nombres de archivo compatibles Windows/Linux

El objetivo de este script, es impedir que el usuario suba evidencias (archivos) con caracteres acentuados o ASCII extendidos que pueden causar poblemas de vnculo HTML posterior al querer mostar la evidencia una vez almacenada en el servidor.

Portafolio en lnea, Facultad de Educacin 5.3.2.3 Chequeo de casillas de verificacin para eliminar evidencias

145

Function ValidaCheck() // Valida que exista al menos una casilla chequeada { var contador = 0; for (var i=0;i<document.frm_archivos.elements.length; i++) { var e = document.frm_archivos.elements[i]; if (e.name != 'allbox') if ( e.checked) { contador = contador + 1; } } if (contador ==0) alert("No ha seleccionado ningun archivo para eliminar, para eliminar documentos del portafolio debe seleccionar al menos un archivo."); else document.frm_archivos.submit(); return false; } function CheckAll() // Chequea todas las casillas { for (var i=0;i<document.frm_archivos.elements.length;i++) { var e = document.frm_archivos.elements[i]; if (e.name != 'allbox') e.checked = !e.checked; } }

( Tabla 5.3.2.3 ) Chequeo de casillas de verificacin para eliminar evidencias

Estos dos pequeos scripts permiten manipular y manejar de mejor forma los objetos de casillas de vefificacin, el script ValidaCheck impide que el formulario se enve si no se ha seleccionado al menos una casilla. El segundo script permite checkear (seleccionar o des-seleccionar) todas las casillas de un formulario.

Portafolio en lnea, Facultad de Educacin

146

5.4 PRUEBAS DE SISTEMA

5.4.1

Subir documentos al servidor

Una de las pruebas que fue necesario realizar es poder subir evidencias (archivos) en el servidor, ello pues la base del sistema consiste en almacenar dichas evidencias para ser posteriormente comentadas o mostradas como tal. Para probar como PHP almacena los archivos se realiz con un formulario bsico en el cual estaba compuesto por un cuadro de texto tipo file que permite seleccionar un documento y un botn submit para enviar el formulario, adems un campo oculto necesario en algunas versiones antiguas de Netscape Navigator, esto para mejorar la compatibilidad en los navegadores.

if (isset($submit)) { set_time_limit(0); $CopiarArchivo = copy( $userfile, $userfile_name ); if (is_uploaded_file ($userfile)) { echo "El archivo fue almacenado en el servidor"; else { echo "Error archivo no pudo ser copiado al servidor";

} }

Tabla (5.4.1) Cdigo fuente para copiar un archivo al servidor


Cabe notar que al subir un documento grande, el servidor web Apache establece un limite de tiempo y corta la conexin, para que esto no ocurra en casos en que la copia demore algn tiempo, se utiliza la funcion de PHP set_time_limit() que inhabilita el limite de tiempo para subir el documento y no se produzca un timeout en el servidor Web y este corte la conexin con el cliente.

Portafolio en lnea, Facultad de Educacin

147

Continuando el tema del almacenamiento de archivos en el servidor, otro detalle que hubo que afinar para subir documentos grandes fue que PHP est configurado y predeterminado por instalacin para permitir un mximo de tamao de subida de 2 mega bytes, para aumentar esta capacidad se debe editar el archivo php.ini o php.conf segn corresponda (windows o linux) y aumentar el tamao como se muestra en la siguiente seccin del archivo de configuracin PHP :

;;;;;;;;;;;;;;;; ; File Uploads ; ;;;;;;;;;;;;;;;; ; Whether to allow HTTP file uploads. file_uploads = On ; Temporary directory for HTTP uploaded files (will use system default if not ; specified). upload_tmp_dir = C:\Archivos de programa\PHP40\uploadtemp ; temporary directory for HTTP uploaded files (will use system default if not specified) ; Maximum allowed size for uploaded files. upload_max_filesize = 2M

Tabla (5.4.1.1) Cdigo de configuracin PHP para aumentar el tamao de los archivos que son almacenados en disco.
La seccin File Upload representa la configuracin de PHP para administrar los archivos que son almacenados en el servidor, para aumentar la capacidad de estos, se debe cambiar la entrada upload_max_filesize por un tamao superior siempre en mega bytes.

Portafolio en lnea, Facultad de Educacin 5.4.2 Llamada autentificada del portafolio en lnea desde otro

148

sistema Web

Otra de las pruebas interesantes que se hizo fue conectar desde el portal EDUCA (http://educa.uct.cl) de la Universidad el sistema de portafolios en lnea, bsicamente, la prueba consisti en llamar la pgina de inicio de un usuario previamente validado en EDUCA y por medio de un vnculo entrar validado al sistema de portafolio y al curso en el cual est trabajando en EDUCA. Cabe notar que el sistema de portafolio al igual que el sistema de portafolio utiliza variables de sesin para controlar el usuario y el curso seleccionado dentro de la aplicacin, estas variables son $sess_user y $sess_curso, los mtodos de paso de variables al autentificar un usuario en el sistema de portafolio es mediante el mtodo POST, la llamada desde el portal EDUCA se realiza mediante el metodo GET, para permitir que el alumno ingrese al portafolio directamente es necesario validar el mtodo GET, asi el cdigo queda de la siguiente manera :

if (is_array ($HTTP_GET_VARS)) { reset ($HTTP_GET_VARS); while (list ($variable, $valor) = each ($HTTP_GET_VARS)) { if($variable == "portaf_curso") { $portaf_curso = $valor; $sess_curso = $valor; } if($variable == "usuario_curso") { // Aqui se asigna el usuario a la VAR de session $sess_user = $valor; } $parametros = $parametros + 1; }

Tabla (5.4.2) Cdigo para aceptar una llamada de validacin externa al portafolio.
<a href="http://192.168.4.43/portafolio/curso/index.php ?portaf_curso=<?$curso?>&usuario_curso=<?$curso?>>Portafolio</a>

Tabla (5.4.2.1) Enlace para llamar al portafolio desde otro sistema

Portafolio en lnea, Facultad de Educacin 5.4.3

149

Generacin de una pgina HTML a partir de una plantilla PHP

Otra de las pruebas que se realiz fue la de producir un documento HTML como salida dinmica, pero que este haya sido generado por otra pgina PHP, el mayor problema aqu consista en pasar los parmetros a la pgina que se iba a generar, ya que la mayoria de las pginas PHP de la aplicacin usan el mtodo POST, un mtodo ms seguro de pasar parmetros entre pginas web ya que no se enva por la URL, sin embargo la solucin pasa por el mtodo GET, es decir invocar directamente la pgina a travs de la URL y entregar ah los parmetros necesarios para ser procesada.

Gracias a que PHP posee una funcin extendida de fopen(), fue posible pasar directamente una pgina PHP y obtener el resultado, segn la definicin oficial del manual de PHP, encontramos la siguiente caracterstica :

fopen ( string filename, string mode [, int use_include_path])

Si filename comienza con "http://" (no es sensible a maysculas), se abre una conexin HTTP 1.0 hacia el servidor especificado y se devuelve un apuntador de fichero al comienzo del texto de respuesta.

Portafolio en lnea, Facultad de Educacin

150

Esta caracterstica de la funcin fopen() permite generar una pgina HTML a partir de otra de tipo PHP, entonces, una forma fcil de generar pginas HTML puede ser de la siguiente manera :

// Generador de codigo HTML $url = "http://192.168.4.43/sitio_portafolio/pruebas/"; $archivo_entrada $archivo_salida $pagina $output = $url."plantilla.php?param1=".$var1."&param2=".$var2; = "prueba.html";

= fopen ($archivo_entrada, "r"); = fopen ($archivo_salida,"w+");

while ( !feof($pagina) ) { $buffer = fgets($pagina, 4096); fwrite( $output, $buffer); } fclose ($pagina); fclose ($output);

Tabla (5.4.3) Cdigo para generar una pgina HTML a partir de una PHP.

El codigo representado en la figura (5.4.3) permite a partir de una plantilla PHP (archivo de entrada) generar otro documento HTML (archivo de salida) para ello: Primero se abre el archivo de plantilla PHP, se abre para escritura el archivo de salida HTML, luego se lee todo el documento de plantilla, linea a lnea usando la funcin fgets(), para ir inmediatamente escribiendo el resultado en la pgina HTML, finalmente se cierran ambos archivos.

Portafolio en lnea, Facultad de Educacin 5.4.4 Iconos personalizados en las evidencias

151

Uno de los detalles solicitados por los profesores fue que se necesitaba personalizar los iconos de las evidencias, es decir, un icono identificativo asociado para cada archivo. Para gestionar esto se creo una tabla con las extensiones ms conocidas de archivos que los alumnos podrian subir ( .doc, .xls, .ppt, .pps, .txt, .jpg, .mpg, etc.) y tambin la imagen incrustada en un campo de tipo BLOB, entonces al listar la evidencia slo quedaba mostrar la imagen o icono asociado a la evidencia, para ello se hizo la siguiente prueba para mostrar imgenes desde una tabla mySQL.
if( $tipo_archivo ) { include("conexin.php"); $link = Conectarse(); $query = "SELECT * FROM tipo_archivo WHERE tipo='$tipo_archivo'"; $resultado = mysql_query($query, $link); $fila = mysql_fetch_object($resultado); Header("Content-type: image/x-bmp"); Echo $fila->imagen; }

Tabla (5.4.4) Cdigo para leer una imagen BLOB desde una tabla mySQL.

El cdigo necesario para implementar esta funcin solo necesita que se pase el parmetro en el cual se especifca el tipo MIME de extension, una vez localizado el cono en la tabla, se debe enviar una cabecera o Header() especificando que el resultado a enviar por la funcin es una imagen, la imgen se muestra finalmente con un simple echo.

La llamada a esta funcin se puede realizar de la siguiente forma :


<img src="mostrar_icono.php?tipo_archivo=application/msword" >

Esto har que se muestre el cono asociado a un archivo de Microsoft Word.

Portafolio en lnea, Facultad de Educacin

152

5.5 IMPLEMENTACIN DEL SITIO WEB

Bsicamente la implementacin del sitio se encuentra actualmente en dos servidores de la Universidad, el primero es un servidor de pruebas y desarrollo que se encuentra en la mquina http://192.168.4.43/ , el segundo es el servidor implementado para el trabajo real de los alumnos, el sitio en este caso se encuentra en la cuenta de usuario portafolio del servidor CTIC visible desde interner, asi la llamada a este servidor es la siguiente : http://ctic.uct.cl/~portafolio . 5.5.1 Implementacin de la aplicacin en el servidor web

( Figura 5.5.1 ) Chequeo de casillas de verificacin para eliminar evidencias

Portafolio en lnea, Facultad de Educacin 5.5.2 Implementacin de los portafolios en el sitio

153

Carpeta del curso

Carpeta de usuario

Carpetas de facetas, criterios y portafolio de producto

( Figura 5.5.2 ) Implementacin de los portafolios en el sitio

Note que la organizacin de los portafolios de los alumnos esta estructurada por ao, semestre, curso, usuario y luego todas las carpetas necesarias para trabajar con el portafolio, en el caso de las facetas son contenedoras de los criterios que finalmente son los que contienen las evidencias del alumno.

Portafolio en lnea, Facultad de Educacin

154

CONCLUSIONES
Como se dijo inicialmente, el desarrollo de la aplicacin de Portafolio en lnea es un proyecto nuevo e innovador dentro de las tecnologas de la informacin para la Educacin. El desarrollo de la aplicacin en s, el anlisis de los requerimientos, el diseo y la implementacin se pueden considerar como un aporte inicial que abre el camino hacia el desarrollo de versiones futuras de portafolios. Uno de los aspectos a considerar de esta aplicacin es que su diseo ha incluido el lenguaje de modelado unificado UML, un estndar adoptado hoy por la gran mayora de analistas y desarrolladores de software de todo el mundo, con esquemas sencillos de entender por la mayora de las personas se ha logrado representar la funcionalidad de la mayor parte de la aplicacin y sus procesos. El desarrollo de esta aplicacin ha ayudado al alumno a conocer y comprender el funcionamiento de la herramienta de portafolios en el rea de la Educacin, se destaca la visin innovadora y emprendedora de las personas encargadas del proyecto de Portafolio en lnea, quienes se han adelantado con creces a las mayoras de instituciones de Educacin al incorporar en su rea de trabajo una herramienta de software este tipo. Finalmente se puede concluir que toda la etapa de desarrollo del sistema de portafolios en lnea ha ayudado en gran manera al alumno a afianzar y aumentar sus conocimientos como analista y desarrollador de software en el rea Internet y que es desde ya un gran aporte a su vida como profesional.

Portafolio en lnea, Facultad de Educacin

155

BIBLIOGRAFIA

Chalk & Wire Prefessional, Sitio web dedicado a las tecnologias de educacin a distancia eLearning y Portafolios en lnea ( http://www.chalkandwire.com ). College of Education University of Florida, sitio Web de la Universidad de Florida en la cual se implementan plantillas para trabajo con portafolios electrnicos (http://www.coe.ufl.edu/OIT/ep-templates.html ). eFolio Minessota, sitio dedicado a la construccin de portafolios de todo tipo, basados en plataforma Web ( http://efolio.project.mnscu.edu/index.asp ). Electronic Portfolios, sitio web donde se muestran ejemplos de portafolios electrnicos (http://wneo.org/hotlists/Portfolios_files/electronic_portfolios.htm). Elen Barrett, Doctora en educacin de la Universidad de Alaska e investigadora de las tecnologas de portafolios electrnicos ( http://electronicportfolios.org/ ). Interactive Tools, Empresa dedicada a la fabricacin de componentes para lenguajes de programacin orientados a la Web ( www.interactivetools.com ) MySQL AB, Empresa dedicada al desarrollo de la base de datos mySQL y otros productos relacionados ( www.mysql.com ) PHP Net, equipo de desarrollo y documentacin del leguaje de pre procesado de pginas de hipertexto ( www.php.net ) The Javascript source, sitio dedicado al lenguaje Javascript con gran cantidad de recursos de carcter gratuto ( http://javascript.internet.com ). UML.org, organizacin dedicada al cual se pueden obtener las especificaciones, documentacin y tecnologas basadas en el lenguaje de modelado unificado (www.uml.org ). Zend Technologies, Empresa dedicada al desarrollo preprocesamiento de hipertextos PHP ( www.zend.com ) del motor de

Portafolio en lnea, Facultad de Educacin

156

APENDICES

GLOSARIO DE TRMINOS Adobe Go-Live : Entorno de desarrollo Web basdo en arrastrar y soltar componentes HTML hacia una pgina, este software permite a los desarrolladores trabajar fcilmente con elementos Javascript, ASP, PHP, capas y hojas de estilo en cascada. ADSL :Abreviacin de Asymetric Digital Subscriber Line, la tecnologa que transforma las lneas telefnicas RTB normales en lneas digitales de alta velocidad aumentado considerablemente la velocidad de conexin a internet Apache : Servidor de protocolo de hipertexto HTTP, servidor de carcter gratuito y disponible para mltiples plataforma es uno de los ms utilizados en servidores Web a nivel mundial, es considerado el servidor Web ms rpido de todos cuando est plenamente integrado con el sistema operativo Linux ASP : Abreviacin de Active Server Pages, es un lenguaje de programacin de lado del servidor, disponible en todos los servidores Web de la empresa Microsoft, la sintaxis de su lenguaje es de caractersticas similares a Visual Basic. CSS : Abreviacin de Cascase Style Sheet (Hojas de estilo en cascada), es un lenguaje de formato extensivo para documentos HTML, permite personalizar y mejorar an ms los diseos de las pginas Web. CTIC : Abreviacin de Centro de Tecnologas de Informacin Computacional, actualmente este centro ha desarrollado el sistema de cursos Web bajo la conocida plataforma EDUCA de la Universidad Catlica de Temuco. HTML : Abreviacin de Hiper Text Mark Language, es el lenguaje estndar para la construccin de pginas Web.

Portafolio en lnea, Facultad de Educacin

157

Interactive Tools

: Compaa desarrolladora de software, especializada en en este informe es htmlArea Versin 2.03.

de

utilidades y componentes Web gratuitos, su producto utilizado Javascript : Lenguaje de programacin orientado a objetos interpretado por el navegador Web, comnmente utilizado para realizar validaciones desde el cliente. Linux : Sistema operativo de carcter gratuito, ampliamente utilizado para servidores Web Apache y bases de datos mySQL, su robusto diseo basado en UNIX le otorga estabilidad y excelente rendimiento con mnimos requerimientos de hardware. Fireworks MX : Software de diseo grfico orientado a la Web de la empresa Macromedia, su principales caractersticas son una variada lista de efectos grficos, manejo de capas, diseos de botones, y la capacidad de exportar el diseo directamente al formato HTML. MINEDUC : Abreviacin de Ministerio de Educacin, el MINEDUC es actualmente quien ha definido cuales son las facetas y criterios con las cuales se componen los portafolios. MPEG MySQL : Estndar de compresin de Audio y video ampliamente utilizada por reproductores de sonido y video. : Servidor de base de datos de carcter gratuito (para fines no comerciales), su principal caracterstica es la velocidad de respuesta, compatible con el estndar SQL92, est disponible para mltiples sistemas operativos. Netscape : Navegador de protocolo de hipertexto desarrollado por la empresa del mismo nombre, fue unos de los primeros y ms populares navegadores Web, soporta la gran mayora de los estndares HTML como Javascrip, Frames, HTML dinmico y CSS, este navegador se encuentra disponible para casi todos los sistemas operativos y es gratuto.

Portafolio en lnea, Facultad de Educacin Opera

158

: Navegador de protocolo de hipertexto, es uno de los navegadores alternativos a Internet Explorer y Netscape, soporta HTML Versin 4, Javascript y CSS entre otros.

PHP

Abreviacin

de

Pre

Hipertext

Processor,

lenguaje

de

programacin ejecutado en el servidor Web, de similitud con el lenguaje C, gran conectividad con diversas bases de datos y su carcter multi-plataforma desarrolladores Web. Power Designer : Software perteneciente a la empresa Sybase, est claramente orientado de modelado visual de datos y procesos, su caractersticas principales es que permite exportar los modelos e implantarlos como bases de datos o bien realizar ingeniera inversa para administrar bases de datos relacionales. Quicktime : Reproductor de audio y video de Apple basado en el estndar MPEG, es capaz de reproducir gran cantidad de formatos de audio y video. RAD : Abreviacin de Rapid Application Design, adjetivo dado a los entornos de desarrollo rpidos que generalmente se caracterizan por un fcil aprendizaje pues la generacin de cdigo fuente se genera a travs de arrastrar y soltar. Real Media : Formato de audio y video desarrollado por la empresa Real Networks para la emisin de Videos en demanda a travs de Internet. Real Player : Reproductor de Audio y Video de la empresa Real Networks, su caracterstica principal es que reproduce el formato Real Media, actualmente compatible tambin con diversos formatos de Audio y Video. SQL : Abreviacin de Standar Query Language, es el lenguaje estndar de consultas para servidores de bases de datos, ampliamente utilizado por programadores y administradores de bases de datos, se caracteriza por su facilidad de sintaxis y potencia al relacionar tablas de una o ms bases de datos. lo hacen el favorito para los

Portafolio en lnea, Facultad de Educacin

159

RTF

: Abreviacin de Rich Text Format o Formato de texto enriquecido, es un formato de texto que permite dar atributos a documentos de texto aplicando colores, vietas, tablas entre otros elementos.

UML

: Abreviacin de Unified Modeling Language o Lenguaje de Modelado Unificado, s la sucesin de una serie de mtodos de anlisis y diseo orientadas a objetos, una de la metas principales es avanzar en el estado de la integracin institucional proporcionando herramientas de interoperabilidad para el modelado visual de objetos

Windows

: Sistema operativo grfico desarrollado por Microsoft, cuenta actualmente con un sin numero de aplicaciones desarrolladas para esta plataforma, es el sistema operativo ms utilizado actualmente por los usuarios medio avanzados.

Windows media player

: Reproductor de audio y sonido de Microsoft, incorporado

actualmente con el sistema operativo Windows es capaz de reproducir gran cantidad de formatos multimedia. WinZip : Software de carcter shareware (de uso gratuito por tiempo limitado) capaz comprimir y descomprimir archivos comprimidos especialmente con formato ZIP entre otros formatos. ZIP : Formato de compresin de archivos desarrollado bajo el algoritmo de compresin Lemppelv Zip.

Portafolio en lnea, Facultad de Educacin APNDICES DE PANTALLAS DE SISTEMA

160

(Figura 1) Bienvenida al sistema

(Figura 2) Autentificacin de usuario

Portafolio en lnea, Facultad de Educacin

161

(Figura 3) Lista de cursos disponibles para inscripcin

(Figura 4) Formulario de inscripcin de cursos para portafolio

Portafolio en lnea, Facultad de Educacin

162

(Figura 5) Bienvenida a un usuario autentificado

(Figura 6) Seleccin de una Faceta y listado de criterios

Portafolio en lnea, Facultad de Educacin

163

(Figura 7) Edicin de comentarios crticos para una faceta

(Figura 8) Muestra de un comentario crtico almacenado

Portafolio en lnea, Facultad de Educacin

164

(Figura 9) Seleccin de un criterio

(Figura 10) Listado de evidencias de un criterio

Portafolio en lnea, Facultad de Educacin

165

(Figura 11) Seleccin de evidencias para ser almacenada

(Figura 12) Mensaje de confirmacin al subir una evidencia

Portafolio en lnea, Facultad de Educacin

166

(Figura 13) Vista de una evidencia y un comentario a ella

(Figura 14) Lista de comentarios crticos a un criterio

Portafolio en lnea, Facultad de Educacin

167

(Figura 15) Men de generacin de portafolio de producto

(Figura 16) Personalizacin y creacin de portafolio

Portafolio en lnea, Facultad de Educacin

168

(Figura 17) Seleccin y personalizacin de facetas

(Figura 18) Seleccin y personalizacin de facetas

Portafolio en lnea, Facultad de Educacin

169

(Figura 19) Seleccin de evidencias

(Figura 20) Opciones para generacin de sitio off-line

Portafolio en lnea, Facultad de Educacin

170

(Figura 21) Vista preliminar (1) de un portafolio de producto

(Figura 22) Vista preliminar (2) de un portafolio de producto

Portafolio en lnea, Facultad de Educacin

171

(Figura 23) Vista preliminar (3) de un portafolio de producto

(Figura 24) Pgina de descarga de un portafolio de producto

Portafolio en lnea, Facultad de Educacin

172

(Figura 25) Pgina bienvenida de un profesor

(Figura 26) Listado de alumnos de un curso para revisin de portafolios

Portafolio en lnea, Facultad de Educacin

173

(Figura 27) Listado elementos nuevos en un portafolio

(Figura 28) Listado evidencias de un alumno para revisin del profesor

Portafolio en lnea, Facultad de Educacin

174

(Figura 29) Revisin de una evidencia y comentario por el profesor

(Figura 30) Mantenedor de cursos del portafolio

Portafolio en lnea, Facultad de Educacin

175

ANEXOS 1. REQUISITOS PARA LA IMPLANTACION Y USO DEL

SISTEMA DE PORTAFOLIO EN LINEA

1.1

REQUERIMIENTOS DE SOFTWARE

La aplicacin de portafolio en lnea tiene los siguientes requerimientos de software para su utilizacin :

1.1.1 Requerimientos para la ejecucin de la aplicacin en el servidor

Los requerimientos necesarios para el portafolio en lnea son dados en la medida que, esta aplicacin necesariamente deber funcionar bajo plataforma Web, con acceso a datos, manejo de archivos y carpetas, de esto ltimo, una de las alternativas ms viables y baratas es la utilizacin de software libre, especficamente Linux como sistema operativo de servidor, bajo esta premisa, la base de datos ms viable y compatible tambin con otros desarrollos de carcter educacional en la Universidad Catlica de Temuco es mySQL, como servidor HTTP a Apache y PHP como el lenguaje de script de servidor, este ltimo, un puente entre la base de datos y el servidor Web.

Portafolio en lnea, Facultad de Educacin 1.1.2 Cliente o navegador Web para visualizacin de la aplicacin

176

Una de las caractersticas de este software es que est desarrollado bajo plataforma WEB, especficamente con PHP y la base de datos mySQL, sin embargo, la mayora de las funcionalidades en el cliente fueron desarrolladas para Internet Explorer 5.5 de Microsoft, que en general viene pre-instalado en la gran mayora de los computadores con Windows 98, Windows 2000 y XP, esto es porque algunas de las caractersticas como el uso de capas, Javascript, HTML dinmico y funciones Javascript fueron probadas en estos sistemas, adems, la herramienta de edicin de texto enriquecido requiere de la versin 5.5 o posterior de este navegador, en equipos que no cuenten con una versin anterior, solo podrn editar comentarios en formato de texto plano, esto es, sin atributos, colores, vietas y tipos de letra.

Cabe notar que la aplicacin ha sido probada tambin en Netscape 7.0 y en el navegador Opera en su versin 7.0 que estn disponibles para UNIX, Linux y Mac-OS entre otros sistemas operativos, como una alternativa a clientes Microsoft Windows, es necesario considerar tambin que en estos navegadores la prdida de funcionalidad es mnima y la aplicacin consigue trabajar de forma adecuada y sin problemas.

Portafolio en lnea, Facultad de Educacin 1.2 REQUERIMIENTOS DE HARDWARE

177

Los requerimientos de hardware se pueden clasificar principalmente en dos grupos, los requerimientos para ejecutar de forma adecuada la aplicacin, y los requerimientos para el usuario, estos ltimos tienen que ver con el tratamiento, la captura y edicin de videos e imgenes que posteriormente sern utilizados por el alumno como evidencia del portafolio.

1.2.1 Requerimientos de plataforma de hardware para la ejecucin del portafolio en lnea.

Dado que la aplicacin de portafolio en lnea es un software de carcter cliente/servidor de tres niveles, y con mltiples usuarios recurrente, el hardware de pruebas dispuesto para ellas es un computador equipado con procesador Pentium IV de 1,2 GHz, 256 MB de memoria RAM, un disco duro de 30 GB., y una tarjeta de red D-Link 100 Mbps. esta es la configuracin del servidor de pruebas, sin embargo, actualmente, la aplicacin ha sido movida a los servidores del Centro de Tecnologas de Informacin CTIC lo que permite que el portafolio sea accedido por los alumnos y profesores desde fuera de la Universidad Catlica de Temuco en el sitio http://ctic.uct.cl/~portafolio/ .

Portafolio en lnea, Facultad de Educacin

178

1.2.2 Requerimientos de hardware para la edicin de videos y captura de imgenes.

Si bien es cierto, estos requerimientos no estn asociados directamente con el portafolio en lnea, las evidencias almacenadas en l pueden contener videos de clases, fotografas, para poder digitalizar este tipo de evidencias, el proyecto cuenta con un equipo especialmente equipado para captura y edicin de video, entre las caractersticas del editor podemos encontrar las siguientes : - Procesador Pentium IV de 2.4 GHz - Memoria RAM de 512 MB. - Tarjeta capturadora ATI Radeon 7500 All in Wonder con sintonizador de TV, y 128 MB de RAM - Dos discos duros de 40 y 30 GB cada uno. - Una unidad de lectora de DVD-ROM - Una unidad de grabacin DVD Pionner - Tarjeta de sonido Sound Blaster Live - Tarjeta de red D-Link de 100 Mbps. - Monitor de 17 pulgadas - Ulead Video Studio como software de edicin de video La idea de tener este computador es que los alumnos involucrados en el proyecto, puedan sentirse libres de filmar sus evidencias y poder traspasar de una manera rpida, fcil y cmoda.

Este computador se encuentra en los laboratorios de informtica educativa de la Facultad de Educacin, en el edificio A (subterrneo). Tambin la facultad de educacin cuenta con 3 scanners para la digitalizacin de imgenes y una cmara digital.

Portafolio en lnea, Facultad de Educacin 1.3 REQUERIMIENTOS PARA EL CLIENTE

179

La aplicacin de portafolio en lnea necesita tambin algunos requerimientos de parte del cliente, en general, tienen que ver con la conexin a Internet y el navegador a utilizar.

1.3.1 Conexin a Internet

Es necesario para utilizar la aplicacin de portafolio en lnea es una conexin a Internet. Una conexin de mdem bsica permitir al usuario realizar la mayora de las funciones del portafolio, sin embargo, es necesario considerar que en el caso de querer almacenar alguna evidencia de tamao considerable (mas de 2 MB) es necesario tener una mejor conexin a Internet, en este caso se sugiere tener una conexin a Internet de banda ancha o ADSL.

1.3.2 Navegador Web

Como la gran mayora de los sistemas operativos usados por los alumnos estn basados en Microsoft Windows, y considerando que Internet Explorer es uno de los navegadores ms utilizados mundialmente, se recomienda tener este navegador, de hecho, la aplicacin de portafolio en lnea ha sido diseada en algunos casos especficamente para este navegador requiriendo la version 5.5 o posterior, aunque tambin pueden usarse otros navegadores como Opera o Netscape en sus versiones 7.0 o posterior respectivamente.

Portafolio en lnea, Facultad de Educacin 1.3.3 Software adicional (en casos opcionales)

180

En el caso que el alumno almacene videos, presentaciones, documentos de texto o planillas de clculo, necesitar el software adecuado para visualizar las evidencias, en el caso de los videos por ejemplo, el proyecto de portafolio en lnea cuenta con los reproductores Real One, QuickTime, y Windows Media player para satisfacer las demandas de los alumnos a estos requerimientos.

Vous aimerez peut-être aussi