diseño web educativa
DESCRIPTION
Es una Web de interés educativo, diseñado con un objetivo pedagógico.Busca facilitar aprendizajes o acceso a recursos didácticosProporciona información, comunicación y formación, convirtiéndose en un espacio virtual de trabajo individual y colaborativoTRANSCRIPT
1
Diseño de Páginas Web y Diseño de Páginas Web y Portales EducativosPortales Educativos
Unidad II. Modelos y diseño de Web Unidad II. Modelos y diseño de Web educativaseducativas
Sección de Post GradoSección de Post Grado
Doctorado en EducaciónDoctorado en Educación
Robert Aldo Velásquez HuertaMg. Informática y Multimedios
Robert Aldo Velásquez HuertaMg. Informática y Multimedios
2
II. Portales: ¿Qué es un portal? 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
3
II. Portales: Características 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.
4
II. Portal: Aplicaciones Educativas 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.
5
II. Portal: Aplicaciones Educativas II. Portal: Aplicaciones Educativas
6
II. Portal: Clasificación 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ónEjm. Colegio de Arquitectos
Entretenimiento- Su contenido es light- Variedad y originalidad de entretenimientos- El chat es uno de sus mayores serviciosEjm. Terra
Consumidores - Uso de consumidores o clientes finales- Permite transacciones comerciales de compraEjm. Hiraoka
7
II. Portal: Clasificación 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
8
II. Portal: Aplicaciones Educativas 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
9
III. Web educativa: ¿Qué es?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)
10
Diseño de Web educativasDiseñ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)
11
Diseño de Web educativasDiseño de Web educativas
¿para que?OBJETIVOS
¿para que?OBJETIVOS
¿qué,cuánto?CONTENIDOS
¿qué,cuánto?CONTENIDOS
¿para quienes?PUBLICO
¿para quienes?PUBLICO
¿cómo?ESTRUCTURA
¿cómo?ESTRUCTURA
¿cómo?VISUALIZACIO
N
¿cómo?VISUALIZACIO
N
Se determinan Se determinan mutuamentemutuamenteSe determinan Se determinan mutuamentemutuamente
Qué les Qué les interesainteresaQué les Qué les interesainteresa
Cómo buscaránCómo buscarán
OrientaciónOrientación
Cómo buscaránCómo buscarán
OrientaciónOrientación
Estética/Estética/Cultura/Cultura/GustosGustos
Estética/Estética/Cultura/Cultura/GustosGustos
Cómo se Cómo se encuentran las encuentran las
cosascosas
Cómo se Cómo se encuentran las encuentran las
cosascosas
Cómo se Cómo se organizanorganizanCómo se Cómo se organizanorganizan
Qué contener para Qué contener para cumplirloscumplirlos
Qué contener para Qué contener para cumplirloscumplirlos
12
Diseño pedagógicoDiseñ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.
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.
13
Diseño pedagógicoDiseñ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.
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.
14
Diseño pedagógicoDiseñ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
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
15
Diseño pedagógicoDiseño pedagógico
Contenidos: Contenidos:
16
Diseño pedagógicoDiseñ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.)
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.)
17
Diseño pedagógicoDiseñ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
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
18
Diseño estructuralDiseñ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.
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.
19
Diseño estructuralDiseñ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.
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.
20
Diseño estructuralDiseño estructural Navegación:
Estructuras de datos:
- Carpetas
- Archivos
Navegación:
Estructuras de datos:
- Carpetas
- Archivos
21
Diseño estructuralDiseño estructural
Jerárquicalineal mixta Red
Navegación:
Estructuras de navegación del web site
Navegación:
Estructuras de navegación del web site
22
Diseño estructuralDiseño estructural Navegación:
Estructuras de navegación del web site
Navegación:
Estructuras de navegación del web site
23
Diseño de interfazDiseñ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.
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.
24
Diseño de interfaz 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
La página debe ser fácil de cargar. Las páginas deben ser fáciles de leer Establecer guías visuales
Izquierda Superior Sup. Izq. anidado
Frames
25
Diseño de interfazDiseño de interfaz
Interfaz: Presentación de las pantallas
26
Diseño de interfazDiseño de interfaz
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
Consideraciones: Consideraciones:
27
Diseño de interfazDiseño de interfaz
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).
Consideraciones: Consideraciones:
28
Diseño Web educativaDiseñ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
29
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