Fases del Desarrollo de sitios Web Educativos.

Las metodologas para el diseo de sistemas plantean una serie de pasos generales que conducen a la elaboracin sistmica de una solucin apoyada en el software para las organizaciones. La que se plantea a continuacin vienen de estos tipos de metodologa hacindole adaptaciones a su utilizacin para sitios Web. Generalmente los pasos se reducen a: Anlisis, Diseo y Construccin de solucin(es), Implementacin y Evaluacin.

1. Anlisis.

En esta fase se define el problema, para ello es necesaria la indagacin de los orgenes de este, aqu se empiezan a enumerar la o las soluciones, que permiten fijar unos objetivos claros. En esta etapa es importante tener claramente resueltos interrogantes que tienen que ver directamente con la decisin de tener un sitio Web, como Qu nos resuelve el sitio Web?, a nivel de usuario que los lleva a utilizarlo?, frente a los servicios Cules se ofrecen? y cul ser su impacto y nivel de aceptacin. En resumen esta etapa presenta los siguientes tems. Identificacin del problema, la primera etapa es la observacin de forma objetiva de lo que ocurre en la organizacin, para hacer notar las falencias. Planteamiento de oportunidades, es la determinacin de que situaciones pueden mejorarse mediante el uso de los recursos Web. Planteamiento de objetivos, enunciar lo que se quieren alcanzar con la creacin del sitio Web, conducen a plantearse procesos de

funcionamiento y presentacin para la consecucin de dichos objetivos. Se enuncian de una forma general que satisfaga los nuevos requerimientos, por ejemplo ampliar la cobertura del negocio, tener nuevos clientes, mejorar los ingresos con nuevos pedidos, facilitar el acceso a la educacin. Al plantearse objetivos se debe tener en cuenta el tipo de usuario al que va dirigido, que expectativas tienen estos al acceder el sitio.

Clase de sitio Web, De acuerdo al negocio y al problema identificado, se decide el sitio web a utilizar: Comercio electrnico de informacin. Educativo comunidad virtual red social manejador de contenidos de descargas noticias subastas poltico Artsticos Personales Ocio

Cuando el sitio est enfocado a la educacin el anlisis presupone una variacin hacia el contexto en mencin, teniendo en cuenta los aspectos propios del campo educativo se podr criterios: desarrollar los siguientes

. A. Todo proyecto educativo con apoyo multimedia y soporte en internet, parte de una necesidad o deficiencia, porque se detecto un problema de tipo educativo relacionado con la transmisin del conocimiento y la apropiacin de este en el ambiente educativo y su relacin con el entorno, traducindose esta relacin en la aplicacin de las competencias adquiridas en la transformacin de la realidad. Entonces, el primer paso consiste en definir, delimitar y describir esa necesidad. Una necesidad se aprecia cuando se produce una brecha entre una situacin que aspiramos sea ideal y la realidad, por eso su enunciado debe ser sencillo, claro y preciso. En la bsqueda de las soluciones se debe tener claro que el proyecto es un medio, un soporte, una herramienta para mejorar la deficiencia. B. Identificada la necesidad o deficiencia y planteadas algunas

soluciones, aparecen los objetivos., estos deben presentar para qu servir el sitio web qu cuestiones resolver y como lo lograr, esto implica conocer su funcionabilidad. Unos objetivos bien definidos nos permitirn medir la efectividad de los resultados de las acciones propuestas. Aqu en un proyecto educativo es importante tener claro a quin va dirigida la solucin, no es lo mismo una solucin para estudiantes de preescolar que an no saben leer que para otros ms avanzados. C. Con los objetivos claros, nos centramos en el planteamiento y eleccin de un tema., este debe ser bien delimitado y que abarque las mnimas y necesarias condiciones pedaggicas, de la mano de las

estrategias

didcticas

que

permitan

exponer

presentar

los

contenidos que se han de seleccionar. En resumen podramos decir que esta eleccin involucra una integracin de objetivos, contenidos, estrategias didcticas, creatividad. D. Definido el tema, sigue la realizacin de la investigacin, en ella se rene informacin sobre los temas abordados. La recoleccin de los datos depende entonces del resultado de la integracin sistmica planteada en el tema y puede efectuarse desde una ficha bibliogrfica, observacin, entrevista, cuestionario o encuesta. La recoleccin de contenidos (conocimiento), y materiales (medios), se debe ubicar y catalogar las teoras, conceptos, leyes, principios, propuestas conceptuales, pedaggicas, as como las imgenes, animaciones, videos, sonidos, fondos musicales, descripciones o narraciones de textos, entre otros, como fuentes necesarias para la elaboracin del diseo multimedia.

2. Diseo y Construccin de la solucin Con la informacin que se recolecto con anterioridad se elabora el

diseo lgico, planear el propsito de cada elemento del sistema, sin hacer consideraciones de hardware y software, en el caso de los sitios web, se ocupa de la organizacin, funcionamiento y navegacin. Una parte de diseo lgico es el diseo de la interfaz de los usuarios con el sitio.

Siguiendo con las aclaraciones necesarias para los sitios que van a ser soporte a la educacin, el diseo lgico tambin es conocido como

Modelado Conceptual. En l se incorpora la comprensin del contexto de la necesidad y los efectos del mismo (Qu hay que hacer y por qu). Formlese y responda estas preguntas: Alcances.

Qu propsito(s) tiene el sitio? Qu actividades en el ambiente (aula, laboratorio, institucin), promovern la socializacin de este trabajo? Contenidos.

El contenido reforzar el currculo escolar? Qu contenido ser relevante para el tema seleccionado? Se presentar el conocimiento necesario? Se mantendr la continuidad requeridas de antemano? Adecuacin. entre conocimiento y las destrezas

Los medios seleccionados son adecuados para el educando al que se dirige? Las destrezas y competencias requeridas son apropiadas para la poblacin objetivo a la que se dirige? Con qu estilo emocional, visual y auditivo se debe presentar el tema a la poblacin objetivo? Los niveles de dificultad se basan en una lgica clara (por ejemplo: habilidad lectora, abstraccin, secuencia) Creatividad.

Cmo despierta y estimula la creatividad? Cmo mostrar una forma creativa de utilizar el saber? Se estimular al educando para que modifique un modelo actual o para que disee un modelo alternativo? Enfoque / motivacin.

El enfoque es adecuado para el educando? La interface motivar al estudiante? Cmo participa el estudiante en el proceso de aprendizaje? El desarrollo propuesto de la interaccin motivar al estudiante? A continuacin se hace el diseo fsico, que podramos decir es la imagen del sitio que responda a los objetivos que se plantearon. En este paso se definen los componentes, como se van a distribuir y manejar; como se almacenaran los datos. 2.1. Estructura

La definicin de la estructura del sitio puede hacerse desde dos enfoques, descendente y ascendente. En la descendente se trata de estructurar del "todo" a las "partes", dividir los contenidos en pginas y definir los enlaces entre pginas. En la Ascendente, por el contrario, se definen los bloques mnimos de informacin, estructuracin que va ms all de la propia segmentacin de informacin en pginas1.
11

Yusef Hassan & Francisco J. Martn Fernndez & Ghzala Iazza. Diseo Web Centrado en el Usuario: Usabilidad y Arquitectura de la Informacin [en linea]. "Hipertext.net", nm. 2, 2004. <http://www.hipertext.net>

En el enfoque descendente se aplica el concepto de: Globalizacin. El sitio es visto como un todo Especializacin. Se divide el sitio de acuerdo al contenido; cada

divisin es una Especializacin del Elemento Global. Entonces se puede decir el sitio est compuesto de una o ms pueden tomarse como Global.

divisiones, a su vez estas divisiones elemento final.

Una divisin a su vez se divide y as sucesivamente hasta llegar a un

Elemento final. Donde cada medio es un Componente, permitiendo interactuar con ellos; utilizando como base un Guin.

Proyecto

Divisin

Divisin

Figura1. Estructura Globalizacin Especializacin

Los rganos de los Sentidos, como ejemplo descendente Globalizacin. rgano de los Sentidos

Especializacin: Los rganos de los Sentidos componen el Sentido del Gusto. El Sentido del Gusto est compuesto de la Boca. La Boca est compuesta de la Fisiologa. La Fisiologa de Boca es el Elemento Final. Donde los componentes son el texto, vdeo, sonido y botones de navegacin.

Con esta estructuracin es claro percibir que un sitio web se representa por pginas conformadas por contenidos multimedia y el conjunto de enlaces que permiten su recorrido.

2.2.

Diseo visual y creacin de los contenidos

En esta fase se especifica la imagen, el aspecto visual que debe tener el sitio web, se podra decir su esqueleto composicin de cada tipo de pgina, aspecto y comportamiento de los elementos de interaccin y presentacin de elementos multimedia, tablas, encabezados, espacio para imgenes, texto, botones, imgenes, logos, cabeceras, fotografas, adems del proceso concepcin y materializacin de la informacin que se va a ofrecer. El proceso de diseo y planificacin es muchas veces tedioso y largo sobre todo para aquellos que tienen una idea clara del proyecto. Muchas veces se ha visto que los diseadores desean empezar rpidamente a digitalizar imgenes y sonidos e incorporarlos en un proyecto, pero dependiendo trabajo duro y consiente se obtiene una idea bastante aproximada del material que ser necesario reunir

(textos, videos, sonidos, fotografas, etc.). Habr necesidad de nuevos materiales, que deben ser procesados para ponerlos en formatos adecuados al programa multimedia. La estructura seleccionada nos permite organizar y jerarquizar los contenidos y mostrar cmo van interrelacionados y comunicados; con lo anterior ya es posible crear y programar la navegabilidad, utilizacin bsquedas. El diseo de la interface refirindonos a las pantallas y mens principales y sub mens tiene mucho que ver con el tema elegido, en este momento se deben tener en cuenta las capacidades de interactividad que se desean incluir. de pginas gua, tablas de contenido, mapas de navegacin y dems elementos visuales que permiten navegacin y

El diseo de la interface debe incorporar lo que sabemos de los usuarios ya que debe ser una herramienta al servicio de estos. Los iconos, los textos de instruccin, los carteles con mensajes de advertencia u orientacin, las referencias, deben tener en cuenta el nivel de desarrollo conceptual/cultural de los usuarios. Ahora ya podemos empezar la elaboracin del guin, que reflejar la estructura del sitio, la organizacin de la informacin, las relaciones entre las distintas unidades de informacin, la estructura de navegacin., al detallar todas las escenas (pantallas) del proyecto. El guin es una lista detallada, pantalla por pantalla, de los elementos que constituirn el proyecto multimedia. Estos elementos se dividen en: Actores (Medios), Interface y Eventos (Acciones a

esperarse por parte del usuario, acciones por condicin o por tiempo). Entonces para cada Escena (pantalla) se describen: a) Objetivos b) Contenidos. Pero en los Contenidos se anotarn las teoras, conceptos y/o propuestas. Es decir, el conocimiento a transmitir. c) Medios: Anotando aqu las herramientas multimedia que van a

intervenir para generar motivacin, por ejemplo fondos musicales, vdeos, animaciones, narraciones, imgenes. Se puede utilizar una tabla como la siguiente:

Medio Nombre Fuente Tipo

Imagen

Sonido

Texto

Foto/Vdeo/Dibujo Icono/BMP/Jgp/Avi

Archivo/voz/CD <Wave/Mid/otro

Libros/Otros Archivo/Literal

Nombre: es la denominacin que tiene el archivo por ej.: jugador1 (imagen); Grito de la multitud (sonido); gol (texto).

Fuente: es el origen del archivo (Internet, CD, Scanner Foto (imagen), Archivo de grabadora de sonido (sonido); manual de baln pie (texto). Tipo, la extensin con la cual se digitalizo el medio d) Interaccin y Eventos: Que ocurre cuando el usuario ejecuta una accin sobre la interface, como cambia de un estado esttico a uno dinmico. Algunas ms aplicadas son:

Interaccin Tiempo

Evento

Descripcin

Ejecucin o intervalo en segundos Transcurrido el tiempo ocurre una accin Pasar el Ratn Al pasar el ratn ocurre una accin Ocurre Una accin Se cambia a otra escena La accin ocurre cuando se suelta el objeto

rea Sensible

Seleccin de Botn Seleccin de Men Seleccin de Objeto

Hacer Clic Hacer clic Arrastra r Objeto

d) Diseo

de

Interfaz:

Se

ubican

los

medios

ser

utilizados,

distribuidos dentro de las zonas de una

interfaz, por ejemplo.

Titulo (texto) rea de comunicacin

Texto Texto rea de navegacin

Imagen

Botn

2.3.

Navegacin n

nnavnavegaci

2.3.1.

PANTALLA

En ella se hace funcional el Guin, la pantalla presenta la forma en que un usuario va a percibir su contenido.

2.3.2.

Mapa de navegacin

En este sentido es cada vez fundamental en el diseo definir el mapa de navegacin o esquema detallado de las opciones que va a tener el usuario en cada parte del sistema. Esto supone responder a las siguientes preguntas: Hacia dnde se puede ir desde cada sitio? Siempre se puede volver al principio? Hay varios "principios"? Cmo se jerarquiza? Se debe poder desplazar slo por cada seccin? Cuntos y qu enlaces fuera de la seccin deben existir, y por qu? Tipos de navegacin a. Navegacin Lineal

Figura 3. Navegacin Lineal

Donde el Usuario navega de manera secuencial ya sea hacia adelante o hacia atrs. Puede ser de dos tipos, Unidireccional la secuencia de la presentacin va en una sola direccin (Siempre Adelante), y

Bidireccional la secuencia de la presentacin va en dos sentidos (Hacia Adelante y Atrs b. Navegacin No Lineal Para este tipo de navegacin se debe establecer enlaces (link). Usado por ejemplo para los Niveles de Ayuda; estando en una seccin del proyecto se va al nivel de ayuda y una vez cerrado este nivel se retorna a la seccin donde se hizo el llamado.

c. Navegacin Jerrquica

Existe una Presentacin de los tems a ser vistos por parte del usuario. A continuacin se visualiza un Men Principal para que el usuario seleccione y desarrolle el tem que desea navegar y aprender.

Figura 5. Navegacin Jerrquica

Definido el tipo de navegacin, la relacin de enlaces se pueden mostrar en una tabla visual de contenido y en tablas que muestren la navegacin entre pginas elementos. 2.3.2.1. Tabla visual de contenido

Regiones Naturales de Colombia

Regin de la Amazona

Regin de la Orinoqua

Regin Andina

Regin Caribe

Regin Pacifica

Extensin y lmites Caractersticas Subregiones

Extensin y lmites Caractersticas Subregiones

Extensin y lmites Caractersticas Subregiones

Extensin y lmites Caractersticas Subregiones

En la figura se muestra una tpica tabla de contenido de navegacin jerrquica, que indica que tendremos un men de opciones y all se podr ingresar libremente a cualquiera de los temas. Por lo tanto la tabla siguiente muestra esos enlaces, del men principal se escogen cualquiera de las opciones.

Mdulo
Regiones Colombia Naturales

Men

Regin 1

Regin 2

Regin 3

Regin 4

Regin 5

Men Regin 1 Regin 2 Regin 3 Regin 4 Regin 5 EJ EJ EJ EJ EJ

EJ

EJ

EJ

EJ

EJ

3. Implantacin y Evaluacin El proceso de la solucin en el contexto del mundo real En la fase de implantacin se: Duplican y distribuyen los materiales, entre los usuarios, encargados. Resuelven problemas tcnicos y se discuten planes alternos

En la fase de Evaluacin se evala la efectividad y eficiencia de la solucin.

3.1.

Pruebas

Aunque la cantidad y exhaustividad de las pruebas dependen mucho del proyecto, sera bueno considerar al menos los siguientes: Prueba de desarrollo: errores de carga y localizacin de archivos, fallos del sistema, prueba de libreras o sistemas de autor utilizados. Prueba de interfaz: "amigabilidad", sencillez, nmero de pasos a seguir para llegar a un punto, fallos menores. A veces es conveniente implicar al usuario en estas pruebas, especialmente si se puede desarrollar un prototipo en las primeras fases del proyecto. Prueba de medios: visualizacin correcta, fallos en digitalizacin, resoluciones, tamaos y duraciones correctas, edicin de pequeos elementos, enlace de distintos medios. Prueba de hardware: pruebas en mquinas mnimas y mximas, en distintas condiciones de vdeo, memoria, conexin a red, etc. En general, dentro del diseo del proyecto es muy importante incluir tambin un plan de pruebas que determine cmo y cundo se van a realizar las distintas pruebas sobre el sitio. (Va a haber betapruebas? Quines? Los mismos programadores deben chequear el uso? Se tienen usuarios dispuestos a probar el sistema? De cunto tiempo dispondrn? Cmo informan de los errores?). Es importante que todo sistema est probado por personas ajenas al desarrollo, que habitualmente estn muy influenciadas por el conocimiento que ya tienen del sistema

Para apreciar un caso prctico de aplicacin de la metodologa, se puede ver un curso gratuito de diseo de sitios web educativos en www.aulascolombia.org