29
1 http http ://109mancocapac. ://109mancocapac. blogspot.com blogspot.com / / DISEÑO Y ASESORAMIENTO PARAR LA GESTION DE INSTITUCIONES EDUCATIVAS A TRAVÉS DE WEB BLOGS TELEF. 991556220-985956288 VER MODELO DE WEB BLOG DE I.E. ASESORADA POR CISESMEDIA

DISEÑO DE WEB EDUCATIVA

Embed Size (px)

Citation preview

Page 1: DISEÑO DE WEB EDUCATIVA

1

httphttp://109mancocapac.://109mancocapac.blogspot.comblogspot.com//        

DISEÑO Y ASESORAMIENTO PARAR LA GESTION DE INSTITUCIONES EDUCATIVAS A TRAVÉS DE WEB BLOGS

TELEF. 991556220-985956288 VER MODELO DE WEB BLOG DE I.E. ASESORADA POR

CISESMEDIA

Page 2: DISEÑO DE WEB EDUCATIVA

2

Page 3: DISEÑO DE WEB EDUCATIVA

II. Portales: II. Portales: ¿Qué es un portal?¿Qué es un portal? II. Portales: II. Portales: ¿Qué es un portal?¿Qué es un portal? Es un conjunto de páginas Web o Es un conjunto de páginas Web o Web site Web site que sirve que sirve

como un punto de entrada único a la información de como un punto de entrada único a la información de una institución o empresa. una institución o empresa.

Los portales deben estar organizados de forma que Los portales deben estar organizados de forma que para los usuarios sea fácil, cómodo e intuitivo para los usuarios sea fácil, cómodo e intuitivo encontrar la información que desean. encontrar la información que desean.

Actúa como punto de entrada a InternetActúa como punto de entrada a Internet Concentra servicios y productosConcentra servicios y productos Organiza Internet ayudando a los usuarios en sus Organiza Internet ayudando a los usuarios en sus

requerimientos de información.requerimientos de información. Cuentan con un mecanismo de búsquedaCuentan con un mecanismo de búsqueda

3

Page 4: DISEÑO DE WEB EDUCATIVA

II. Portales: II. Portales: CaracterísticasCaracterísticas II. Portales: II. Portales: CaracterísticasCaracterísticas Entre las características claves que debe Entre las características claves que debe cumplir un buen portal están:cumplir un buen portal están:

Un diseño agradable de sus páginas y una Un diseño agradable de sus páginas y una interfaz de fácil uso para los usuariosinterfaz de fácil uso para los usuarios

Proporcionar mecanismos de organización y Proporcionar mecanismos de organización y búsqueda de informaciónbúsqueda de información

Proveer mecanismos de gestión y seguridad Proveer mecanismos de gestión y seguridad adecuadosadecuados

Permitir el acceso a una variedad de recurso, no Permitir el acceso a una variedad de recurso, no sólo HTTP.sólo HTTP.

4

Page 5: DISEÑO DE WEB EDUCATIVA

II. Portal: II. Portal: Aplicaciones EducativasAplicaciones Educativas II. Portal: II. Portal: Aplicaciones EducativasAplicaciones Educativas Servicios. Servicios.

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

5

Contenidos.

- Información (noticias, información especializada, galerías, etc.)

- Comunidades virtuales.

- Directorios de información.

Page 6: DISEÑO DE WEB EDUCATIVA

II. Portal: II. Portal: Aplicaciones EducativasAplicaciones Educativas II. Portal: II. Portal: Aplicaciones EducativasAplicaciones Educativas

6

Page 7: DISEÑO DE WEB EDUCATIVA

II. Portal: II. Portal: ClasificaciónClasificación II. Portal: II. Portal: ClasificaciónClasificación Temporales Temporales

- Tienen una vida limitada- Tienen una vida limitada- Objetivo es informar y promocionar eventos - Objetivo es informar y promocionar eventos

Medios de opiniónMedios de opinión- Publicaciones diarias de prensa o académicos- Publicaciones diarias de prensa o académicos- Fácil mantenimiento para facilitar su actualización- Fácil mantenimiento para facilitar su actualizaciónEjm. Ejm. Colegio de ArquitectosColegio de Arquitectos

EntretenimientoEntretenimiento- Su contenido es - Su contenido es lightlight- Variedad y originalidad de entretenimientos- Variedad y originalidad de entretenimientos- El - El chatchat es uno de sus mayores servicios es uno de sus mayores serviciosEjm. Ejm. TerraTerra

Consumidores Consumidores - Uso de consumidores o clientes finales- Uso de consumidores o clientes finales- Permite transacciones comerciales de compra- Permite transacciones comerciales de compraEjm. Ejm. HiraokaHiraoka

7

Page 8: DISEÑO DE WEB EDUCATIVA

II. Portal: II. Portal: ClasificaciónClasificación II. Portal: II. Portal: ClasificaciónClasificación Business to businessBusiness to business

- Orientado solo a usuarios finales, no pueden realizar - Orientado solo a usuarios finales, no pueden realizar transaccionestransacciones

- Acceso a catálogos y enlaces de productos- Acceso a catálogos y enlaces de productos

Ejm. Ejm. UniqueUnique InformaciónInformación

- Sitios de información y corresponden a organismos - Sitios de información y corresponden a organismos educativos, cultural, etc.educativos, cultural, etc.

Ejn. Ejn. Espacios educativosEspacios educativos EducativosEducativos

- Brindan servicios de formación, capacitación- Brindan servicios de formación, capacitación

- Brindan recursos para los docentes, educadores y público - Brindan recursos para los docentes, educadores y público en generalen general

Ejm. Huascarán. Ejm. Huascarán. EnlacesEnlaces

8

Page 9: DISEÑO DE WEB EDUCATIVA

9

II. Portal: II. Portal: Aplicaciones EducativasAplicaciones Educativas II. Portal: II. Portal: Aplicaciones EducativasAplicaciones Educativas Servicios. Servicios.

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

Page 10: DISEÑO DE WEB EDUCATIVA

III. Web educativa: III. Web educativa: ¿Qué es?¿Qué es?III. Web educativa: III. Web educativa: ¿Qué es?¿Qué es?

10

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)

Page 11: DISEÑO DE WEB EDUCATIVA

Diseño de Web educativasDiseño de Web educativasDiseño de Web educativasDiseño de Web educativas Diseño pedagógico Diseño pedagógico

- Objetivo- Objetivo- Público- Público- Contenidos- Contenidos

Diseño estructuralDiseño estructural- Estructura general del web- Estructura general del web- Sistema de navegación- Sistema de navegación

Diseño de la interfazDiseño de la interfaz- Estructura de las páginas (marcos)- Estructura de las páginas (marcos)- Composición de los elementos(textos, fondos, - Composición de los elementos(textos, fondos, imágenes, íconos, tablas, marcos)imágenes, íconos, tablas, marcos)

11

Page 12: DISEÑO DE WEB EDUCATIVA

Diseño de Web educativasDiseño de Web educativasDiseño de Web educativasDiseño de Web educativas

12

¿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

Page 13: DISEÑO DE WEB EDUCATIVA

13

Diseño pedagógicoDiseño pedagógicoDiseñ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.

Page 14: DISEÑO DE WEB EDUCATIVA

14

Diseño pedagógicoDiseño pedagógicoDiseñ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.

Page 15: DISEÑO DE WEB EDUCATIVA

15

Diseño pedagógicoDiseño pedagógicoDiseñ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

Page 16: DISEÑO DE WEB EDUCATIVA

16

Diseño pedagógicoDiseño pedagógicoDiseño pedagógicoDiseño pedagógico Contenidos: Contenidos:

Page 17: DISEÑO DE WEB EDUCATIVA

17

Diseño pedagógicoDiseño pedagógicoDiseñ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.)

Page 18: DISEÑO DE WEB EDUCATIVA

18

Diseño pedagógicoDiseño pedagógicoDiseñ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

Page 19: DISEÑO DE WEB EDUCATIVA

19

Diseño estructuralDiseño estructuralDiseñ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.

Page 20: DISEÑO DE WEB EDUCATIVA

20

Diseño estructuralDiseño estructuralDiseñ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.

Page 21: DISEÑO DE WEB EDUCATIVA

21

Diseño estructuralDiseño estructuralDiseño estructuralDiseño estructural Navegación:

Estructuras de datos:

- Carpetas

- Archivos

Navegación:

Estructuras de datos:

- Carpetas

- Archivos

Page 22: DISEÑO DE WEB EDUCATIVA

22

Diseño estructuralDiseño estructuralDiseñ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

Page 23: DISEÑO DE WEB EDUCATIVA

23

Diseño estructuralDiseño estructuralDiseño estructuralDiseño estructural Navegación:

Estructuras de navegación del web site

Navegación:

Estructuras de navegación del web site

Page 24: DISEÑO DE WEB EDUCATIVA

24

Diseño de interfazDiseño de interfazDiseñ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.

Page 25: DISEÑO DE WEB EDUCATIVA

25

Diseño de interfaz Diseño de interfaz 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

Page 26: DISEÑO DE WEB EDUCATIVA

26

Diseño de interfazDiseño de interfazDiseño de interfazDiseño de interfazInterfaz: Presentación de las

pantallas

Page 27: DISEÑO DE WEB EDUCATIVA

27

Diseño de interfazDiseño de interfazDiseñ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:

Page 28: DISEÑO DE WEB EDUCATIVA

28

Diseño de interfazDiseño de interfazDiseñ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:

Page 29: DISEÑO DE WEB EDUCATIVA

29

Diseño Web educativaDiseño Web educativaDiseñ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