Sección de Post Grado

Doctorado en Educación

Diseño de Páginas Web y

Portales Educativos

Unidad II. Modelos y diseño de Web

educativas

Robert Aldo Velásquez Huerta

Mg. Informática y Multimedios
velaldo@gmail.com
1
II. Portales: ¿Qué es un portal?
 Es un conjunto de páginas Web o Web site que sirve como un
punto de entrada único a la información de una institución o
empresa.
 Los portales deben estar organizados de forma que para los
usuarios sea fácil, cómodo e intuitivo encontrar la información
que desean.
 Actúa como punto de entrada a Internet
 Concentra servicios y productos
 Organiza Internet ayudando a los usuarios en sus
requerimientos de información.
 Cuentan con un mecanismo de búsqueda

2
II. Portales: Características

Entre las características claves que debe cumplir un buen

portal están:
 Un diseño agradable de sus páginas y una interfaz de fácil
uso para los usuarios
 Proporcionar mecanismos de organización y búsqueda de
información
 Proveer mecanismos de gestión y seguridad adecuados
 Permitir el acceso a una variedad de recurso, no sólo HTTP.

3
II. Portal: Aplicaciones Educativas
 Servicios.
- Búsqueda de información. (Buscador o índices)
- Cuentas de acceso a e-mail
- Noticias ( suscripciones rss)
- Entretenimientos (páginas personales)
- Servicios comunicaciones (chat, foros)
- Descargas

 Contenidos.
- Información (noticias, información especializada, galerías,
etc.)
- Comunidades virtuales.
- Directorios de información.

4
II. Portal: Aplicaciones Educativas

5
II. Portal: Clasificación
 Temporales
- Tienen una vida limitada
- Objetivo es informar y promocionar eventos
 Medios de opinión
- Publicaciones diarias de prensa o académicos
- Fácil mantenimiento para facilitar su actualización
Ejm. Colegio de Arquitectos
 Entretenimiento
- Su contenido es light
- Variedad y originalidad de entretenimientos
- El chat es uno de sus mayores servicios
Ejm. Terra
 Consumidores
- Uso de consumidores o clientes finales
- Permite transacciones comerciales de compra
Ejm. Hiraoka
6
II. Portal: Clasificación
 Business to business
- Orientado solo a usuarios finales, no pueden realizar transacciones
- Acceso a catálogos y enlaces de productos
Ejm. Unique
 Información
- Sitios de información y corresponden a organismos educativos,
cultural, etc.
Ejn. Espacios educativos
 Educativos
- Brindan servicios de formación, capacitación
- Brindan recursos para los docentes, educadores y público en
general
Ejm. Huascarán. Enlaces

7
II. Portal: Aplicaciones Educativas
 Servicios.
- Búsqueda de información. (Buscador o índices)
- Cuentas de acceso a e-mail
- Noticias ( suscripciones rss)
- Entretenimientos (páginas personales)
- Servicios comunicaciones (chat, foros)
- Descargas

8
III. Web educativa: ¿Qué es?
 Es una Web de interés educativo, diseñado con un objetivo
pedagógico.
 Busca facilitar aprendizajes o acceso a recursos didácticos
 Proporciona información, comunicación y formación,
convirtiéndose en un espacio virtual de trabajo individual y
colaborativo.
 Pueden ser Web personales (Web docente), institucionales
(Portales educativos), formativas (Campus virtuales)

9
Diseño de Web educativas
 Diseño pedagógico
- Objetivo
- Público
- Contenidos
 Diseño estructural
- Estructura general del web
- Sistema de navegación
 Diseño de la interfaz
- Estructura de las páginas (marcos)
- Composición de los elementos(textos, fondos, imágenes,
íconos, tablas, marcos)

10
Diseño de Web educativas
Se determinan
¿para que? mutuamente
OBJETIVOS
Qué contener para ¿para
cumplirlos quienes?
¿qué,cuánto? PUBLICO
CONTENIDOS Qué les
interesa
Cómo se
organizan
¿cómo? Cómo buscarán
ESTRUCTURA Orientación
Cómo se Estética/
encuentran las Cultura/
cosas Gustos
¿cómo?
VISUALIZACIO
N 11
Diseño pedagógico

 Objetivos: Establecer los propósitos de su elaboración

y su utilidad educativa.
¿Por qué y para que se elabora la página Web?

 Para presentar la imagen y actividades de la

institución educativa ante la comunidad educativa
y el contexto local
 Para que la comunidad educativa (docentes y
estudiantes) accedan a recursos, actividades
necesarios para los procesos de enseñanza y
aprendizaje.

12
Diseño pedagógico

 Destinatarios: Establecer la población a la que

pretendemos alcanzar con la Web.
¿A quienes va dirigido la página Web?

 Establecer un identi-kit (características) del publico

o potenciales usuarios, diagnosticar sus intereses,
inclinaciones, gustos, preferencias, etc. en general
y particular.
 Los usuarios ¿qué buscarán en mi página?
 Información posibilita establecer los criterios del
diseño de contenidos, lenguaje y estética y la
forma como se presentará, los elementos que debe
contener el site.

13
 Diseño pedagógico

 Contenidos: Comprende la información y recursos que

se presentará de forma organizada en la página Web.
¿Qué contenidos y cómo se organizarán para
presentarlos?

 Seleccionar la información y recursos significativos,

interesantes, útiles para los usuarios.
 La profundidad y el lenguaje para tratar la
información debe ser adecuada, concisa y concreta.
No lenguaje insinuante ni ambiguo.
 Establecer la estructura general de los contenidos y
las opciones o elementos principales de la Web

14
 Diseño pedagógico

 Contenidos:

15
 Diseño pedagógico

 Contenidos para la Web docente:

 Presentación del docente (portafolio)
 Presentación de la institución del docente
 Webs de las asignaturas o apuntes del docente
 Actividades de investigación o producción
intelectual
 Agenda
 Canales de comunicación (e-mail, foro, chat, blog,
videoconferencia)
 Enlaces a herramientas o servicios (descargas,
programas, recursos, fuentes de información, etc.)

16
 Diseño pedagógico

 Contenidos para la Web de asignatura:

 Presentación de la asignatura
 Temario de los contenidos y recursos (documentos,
manuales, presentaciones, videos, ejercicios y
actividades, webquest, enlaces, bibliografía, wiki)
 Zona de descarga de recursos (programas)
 Enlaces a herramientas o servicios (descargas,
programas, recursos, fuentes de información, etc.)
 Canales de comunicación (listado de estudiantes,
blog, e-mail, foro, chat, videoconferencia)
 Agenda y anuncios de la asignatura

17
Diseño estructural
 Navegación: Organización del site, hipervínculos de
las páginas entre si configuran la estructura del sitio.

¿Cómo se intentará acceder y encontrar la información?

• La estructura debe responder a los criterios de

búsqueda y acceso a la información.
• Conviene dividir las unidades de información en sub-
unidades pequeñas, completas y coherentes para
luego enlazarlos.
• Elaborar el mapa de navegación que refleje la relación
entre las páginas del Web site.

18
Diseño estructural
 Consideraciones:

• Fragmentación de contenidos: División lógica de los

contenidos, mantener la estructura conceptual,
aprovechar la fragmentación hipertextual.
• Construcción de la estructura: definición de la
jerarquía, organización de los niveles de información
• Sistema de navegación: elementos que permiten
explorar las páginas, rutas a seguir por los usuarios,
definir los caminos de exploración.

19
Diseño estructural
 Navegación:
Estructuras de datos:
- Carpetas
- Archivos

20
Diseño estructural
 Navegación:
Estructuras de navegación del web site

lineal Jerárquica mixta Red

21
Diseño estructural
 Navegación:
Estructuras de navegación del web site

22
Diseño de interfaz

 Interfaz: Se refiere a los aspectos de la visualización

de una página Web
¿Cómo se deben ver la página los usuarios?

 Definir la estructura de las páginas, trabajo con

“frames”
 Determinar la composición de los elementos ¿Cómo
se presentará la información?
 Los elementos gráficos deben enmarcarse a los
objetivos y aspectos culturales del publico.
 No se debe “decorar” o “adornar” con elementos que
distorsionan el mensaje.
 La estética no debe adecuarse a los gustos y
preferencia de los responsables.
23
Diseño de interfaz

 La página debe ser fácil de cargar.

 Las páginas deben ser fáciles de leer
 Establecer guías visuales

Frames

Izquierda Superior Sup. Izq. anidado

24
Diseño de interfaz
Interfaz: Presentación de las
pantallas

25
Diseño de interfaz
 Consideraciones:

 Diseño gráfico
● Textos: letras fácilmente legibles, tamaño (no -12),
párrafos breves, uso adecuado de las mayúsculas.
● Fondos: contraste adecuado para legibilidad de los
textos, no muchas tramas, fondos como elementos de
orientación y comunicación.
● Imágenes: deben cumplir una función, tamaño
proporcional, tamaño en bytes.
● Tablas: no ajustar a los márgenes, aprovechar para
ordenar el diseño.
● Marcos: proporcionar una simetría adecuada

26
Diseño de interfaz
 Consideraciones:

 Visión global
● Definir las características de los títulos, subtítulos, y
cuerpo del texto.
● Elección de fuentes, colores, apariencia de los
hipervínculos.
● Definir los fondos, elementos multimediales a incluir
(videos, sonidos).

27
Diseño Web educativa
 Otras consideraciones
- Compatibilidad con los navegadores
- Compatibilidad de resoluciones
- Facilidad de navegación
- Rapidez al cargar páginas gráficas
- Considerar las actualizaciones

28
 La información y la libertad son indivisibles.
La revolución informática es inimaginable sin
la democracia y la verdadera democracia es
inimaginable sin la libertad de información.
Kofi Annan

29