Cuando hablamos de diseño en esta propuesta no referimos a la forma global de presentar la interfase por medio de la cual el alumno tendrá acceso al material educativo, además, de manera importante, las posibilidades de navegación e interacción, con la finalidad de que se logren los objetivos planteados previamente en el propio material.
Aquí nos auxiliaremos en cierto modo de las herramientas del diseño grafico, con un enfoque específico para el diseño de páginas WEB. Nuestro material es educativo, pero independientemente de que este se presente por medio de una plataforma educativa para internet o en un disco compacto para su utilización, la metodología es la misma.
2.1. El DI AGRAMA ORGANI ZACI ONAL
Antes de realizar el diseño de la interfaz, es importante establecer una estructura que nos permita tener una visión general de la forma como quedara integrado el material educativo, así como la definición de cada una de las páginas que integraran el material, espeficicando la interrelación que existirá entre ellas.
Para esto nos valemos del diagrama organizacional, el cual justamente nos permitirá establecer la organización del material, utilizando para esto la lista temática y el diagrama conceptual previamente elaborados. Para cierta facilidad, es necesario valernos de alguna herramienta de diagramación y en este caso seguiremos trabajando con VI SI O, que es un elemento de la suite de Office de Microsoft.
En la figura No. 3 se muestra el diagrama general y en la parte correspondiente al caso practico, se muestra el desarrollo completo.
La Computadora Personal Multimedia COMPUTACIÓN Presentacion BarraTitulo jpg Intro avi Glosario txt
Instituto Politécnico Nacional CECyT Miguel Othón de Mendizábal
Subdirección Académica Academia de Computación Computación Diagrama organizacional 1 de 5 2 pantallas Glosario
Figura No. 3 Diagrama organizacional general.
2.2 LA I NTERFAZ DEL USUARI O
En esta parte, se mencionan los aspectos básicos del diseño grafico para paginas WEB, partiendo del hecho de que los elementos que se incluyen son texto, imágenes, animaciones, videos, etc. Los cuales deben estar integrados de manera armónica para transmitir el mensaje deseado.
Estos elementos se combinan considerando diferentes aspectos por medio de formas, resaltando los contornos, estableciendo la ubicación adecuada para dichos
elementos, además de manejar las dimensiones, el contraste, la simetría y el color con el fin de lograr un equilibrio en el diseño.
Debemos considerar que existe una gran diferencia entre el diseño grafico tradicional y el diseño de una pagina WEB; en este caso se presenta de manera importante el aspecto dinámico de las mismas ya que contiene elementos de interacción por medio de los cuales, utilizando los menús de navegación, hipervínculos, botones de acción y otros elementos mas, permiten que el usuario se desplaza a placer dentro del material.
En esta parte del diseño, se deben definir las áreas que ocupara cada uno de los elementos integrantes de la composición y esto será de acuerdo al tipo de producto a desarrollar. Es recomendable no dejar demasiados espacios vacíos, pero tampoco cargar en exceso las diferentes páginas. Se debe cuidar que los elementos guarden una proporción adecuada, de acuerdo a la función que desempeñan. Al lograr que la composición grafica sea equilibrada, esto permitirá que el espectador busque en ella inconscientemente orden y estabilidad para ubicar fácilmente los aspectos que mas le interesan.
A fin de lograr el diseño, es posible valernos nuevamente de algún diagramador que por medio de determinados símbolos, se establecerá el orden y la ubicación de os difererentes elementos que integraran las paginas del material educativo.
Siempre será importante ubicar el lugar para el logotipo, en este caso, hablamos de un material educativo y es importante identificarlo por medio de alguna forma gráfica o en base a una descripción específica. Los menús de navegación deben estar en un lugar visible y agrupados de tal manera que sin restar importancia a la información principal, sea fácil recurrir a cada una de las acciones que representan.
Los iconos de igual manera, deben de tener el suficiente tamaño para ser perfectamente visibles, pero de igual manera, que no desvíen la atención del usuario de la parte informativa del material.
En el caso de paginas WEB, además de los menús de navegación, necesariamente deben incluirse botones de navegación, ya que estos permitirán un desplazamiento lineal a través del material y los menús presentan la posibilidad de ubicarse en un lugar especifico del material, sin necesidad de recorrer todos los elementos del mismo.
Cuando se incluyen videos es importante que el área que los contenrtendra, sea del tamaño adecuado para que en el momento de su visualización, se observen claramente a fin de aprovechar la información que se pretende con ellos.
Una forma de obtener equilibrio en la distribución de una pagina WEB, es la utilización de un reticulado, la que formara cuadros o rectángulos para ubicar en cada uno de ellos los diferentes elementos que integran el diseño, logrando con esto simetría de manera global. Siempre es recomendable buscar equilibrio entre texto e imágenes, procurando el exceso de ambos aunque siempre se requiere más texto que imágenes.
En la figura No. 4 se muestra la interfase de una de las páginas del material cumpliendo con las características mencionadas anteriormente. Como se puede observar, en la parte superior izquierda se ubicara la descripción del material, en la parte superior derecha los botones de navegación y en el centro de esa línea, un menú descolgante a partir del cual se puede seleccionar el tema específico para abordarlo. En el área principal de la pagina, se tiene un cuadro de texto con barra de desplazamiento, donde se describe el tema de manera especifica y a la derecha se mostraran dos videos que proporcionan información que permitirán comprender de forma mas clara los conceptos de la unidad temática en cuestión.
Computación
Tabla de contenido Salir Atrás Inicio Siguiente Logotipo del títuto
Instituto Politécnico Nacional CECyT Miguel Othón de Mendizábal
Subdirección Académica Academia de Computación
Computación Guión técnico: Interfaz de usuario
2 de 25 aire 2005
Computación La Computadora Personal
Antecedentes
Antecedentes Evolución del cómputo matemático
Evolución tecnológica de la computadora
Figura No. 4 I nterfaz del usuario de la segunda pagina del Material Educativo.
2.3. EL GUI ÓN TÉCNI CO
Después de elaborar la interfase de cada una de las paginas que integraran el material educativo es necesario contar con un elemento que describa de forma clara las características de cada uno de los elementos que integraran el diseño, lo que permitirá ubicarlos de forma rápida y sencilla.
Para este caso, en primer lugar, se describe la pantalla o interfase, la unidad, el tema y subtema que se desarrolla, posteriormente, se listan los nombres de los íconos de interfaz, se describe el tipo y nombre del elemento asociados y su función en caso de ser necesario.
Este documento se define como guión técnico o guión multimedia y es de gran importancia, se elabora tomando como base: