1

Diseño de Páginas Web y Diseño de Páginas Web y Portales EducativosPortales Educativos

Unidad I. Semiología aplicado al diseño Unidad I. Semiología aplicado al diseño multimedia de páginas Web.multimedia de páginas Web.

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

velaldo@gmail.com

Robert Aldo Velásquez HuertaMg. Informática y Multimedios

velaldo@gmail.com

2

I. Internet: Aplicaciones I. Internet: Aplicaciones

Consultar información

Servicios públicos

Consultar diarios

Acceso a base de datos

Radio/Tv

Intercambio información

Crear información

Descargar archivos

3

I. Internet: Aplicaciones I. Internet: Aplicaciones

Consultar información

- Millones de páginas con información de todo tipo y en diferentes idiomas

- Accedemos mediante los buscadores (google, quintura)

4

I. Internet: Aplicaciones I. Internet: Aplicaciones

Servicios Públicos

- Acceso a información y servicios a través de Internet

- Web del estado (e-government)

- Trámites administrativos en línea

5

I. Internet: Aplicaciones I. Internet: Aplicaciones

Consultar Periódicos

- Webs de los periódicos y revistas

- Ofrecen la misma información que las ediciones impresas

6

I. Internet: Aplicaciones I. Internet: Aplicaciones

Acceso a Bases de Datos

- Bases de datos de investigaciones

- Accesos a bibliotecas

7

I. Internet: Aplicaciones I. Internet: Aplicaciones

Radios, TV, música, videos

- Transmisión de sonidos (podcast )y video (broadcast)

- Acceso a radios y televisión en línea.

8

I. Internet: Aplicaciones I. Internet: Aplicaciones

Intercambio de información – comunicación

- Correo electrónico

- Mensajería electrónica MSN

- Mensajes a móviles SMS

- Chat

- Telefonía IP

- Videoconferencia

9

I. Internet: Aplicaciones I. Internet: Aplicaciones

Crear Información

- Construir su propia página Web

- Generar una bitácora (Blogs)

10

I. Internet: Aplicaciones Educativas I. Internet: Aplicaciones Educativas

Comunicación interpersonal

Elimina las distancias y los muros de la clase, favorece actividades entre grupos.

- Correspondencia telemática (kidlink)

- Clases globales

- Tutoría virtual

- Reuniones virtuales

11

I. Internet: Aplicaciones Educativas I. Internet: Aplicaciones Educativas Recogida de información

Se orienta a recabar información inédita utilizando las herramientas de comunicación

- Encuestas por correo

- Cuestionarios en la Web

12

I. Internet: Aplicaciones Educativas I. Internet: Aplicaciones Educativas Trabajo colaborativo en grupo

Comprende la construcción de los conocimientos a través del trabajo en grupo.

Obliga al estudiante a desarrollar capacidades para el trabajo en grupo

- Creación colectiva. Secuencial o conjunta, se puede emplear el e-mail o herramientas colaborativas (Wiki, editores en línea )

- Concursos como motivación para realizar una tarea escolar,

13

I. Internet: Aplicaciones Educativas I. Internet: Aplicaciones Educativas Búsqueda de información y acceso a recursos

- La red tiene una gran cantidad de documentos en formato digital (textos, imágenes, música, programas, etc.)

- Proyectos que implican la investigación, exploración de Internet en busca de datos e informaciones. (WebQuest)

- Herramientas para la búsqueda y selección de información (google, quintura,etc.)

14

I. Internet: Aplicaciones Educativas I. Internet: Aplicaciones Educativas Publicación electrónica

- La Web es el servicio con mayor difusión.

- La publicación y difusión de información no tiene control.

- Se requiere un mínimo de conocimientos técnicos.

15

I. Internet: Aplicaciones Educativas I. Internet: Aplicaciones Educativas Autoaprendizaje y formación continua.

- Los diversos servicios posibilitan generar entornos de autoaprendizaje.

- Sistemas de enseñanza virtual (e-learning), para actividades de formación y entrenamiento.

16

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

17

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.

18

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.

19

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

20

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

21

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

22

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

23

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)

24

III. Web educativa: Etapas construcciónIII. Web educativa: Etapas construcción

Etapa de Conceptualización (Prediseño)

- Objetivo

- Público

- Contenidos

- Estructura

- Visualización Etapa de armado y configuración (Construcción)

- Diseño gráfico (textos, fondos, imágenes, tablas, marcos)

- Diseño de las páginas (estructura de los contenidos)

- Establecer enlaces (estructura de navegación, elementos de exploración)

- Incorporar multimedias (videos, sonidos)

- Incorporar archivos (download)

25

III. Web educativa: Etapas construcciónIII. Web educativa: Etapas construcción

Etapa de puesta en marcha (Implementación servidor) - Pruebas de funcionamiento links, multimedia, scripts- Ajustes finales- Publicación del Web

26

III. Web educativa: PrediseñoIII. Web educativa: Prediseño

¿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

27

III. Web educativa: ObjetivosIII. Web educativa: Objetivos

Establece los propósitos de su elaboración y publicación.

¿Para que se realiza esta página Web? Para presentar la imagen de la institución

educativa como la mejor ante la comunidad educativa y el contexto local

Para que la comunidad educativa (docentes y estudiantes) accedan a información y recursos para apoyar los procesos de formación

Establece los propósitos de su elaboración y publicación.

¿Para que se realiza esta página Web? Para presentar la imagen de la institución

educativa como la mejor ante la comunidad educativa y el contexto local

Para que la comunidad educativa (docentes y estudiantes) accedan a información y recursos para apoyar los procesos de formación

28

III. Web educativa: PúblicoIII. Web educativa: Público

Establecer la población a la que pretendemos alcanzar con la Web.

¿Para quienes es esta página Web? Establecer un identi-kit del publico, definir sus

intereses, inclinaciones, gustos, preferencias, etc. en general y particular

Esa gente ¿qué busca en mi página? Información posibilita establecer los criterios del

diseño de contenidos, lenguaje y estética.

Establecer la población a la que pretendemos alcanzar con la Web.

¿Para quienes es esta página Web? Establecer un identi-kit del publico, definir sus

intereses, inclinaciones, gustos, preferencias, etc. en general y particular

Esa gente ¿qué busca en mi página? Información posibilita establecer los criterios del

diseño de contenidos, lenguaje y estética.

29

III. Web educativa: ContenidosIII. Web educativa: Contenidos

Es la información y recursos que se presenta en la página Web.

¿Qué información y recursos es lo que interesa? Información y recursos deben ser significativos,

interesantes, útiles para le publico. El lenguaje para tratar la información debe ser

adecuada, concisa y concreta. No lenguaje insinuante ni ambiguo.

Es la información y recursos que se presenta en la página Web.

¿Qué información y recursos es lo que interesa? Información y recursos deben ser significativos,

interesantes, útiles para le publico. El lenguaje para tratar la información debe ser

adecuada, concisa y concreta. No lenguaje insinuante ni ambiguo.

30

III. Web educativa: EstructurasIII. Web educativa: Estructuras

Jerárquicalineal mixta Red

La relación de las páginas entre si configuran la estructura del sitio.

La estructura debe responder a los criterios de búsqueda.

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

Conviene dividir las unidades de información en sub-unidades pequeñas, completas y coherentes luego enlazarlos

La relación de las páginas entre si configuran la estructura del sitio.

La estructura debe responder a los criterios de búsqueda.

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

Conviene dividir las unidades de información en sub-unidades pequeñas, completas y coherentes luego enlazarlos

31

III. Web educativa: VisualizaciónIII. Web educativa: Visualización

Se refiere a los aspectos de la visualización de una página Web

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

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.

Se refiere a los aspectos de la visualización de una página Web

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

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.

32

III. Web educativa: VisualizaciónIII. Web educativa: Visualización

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

33

III. Web educativa: Consideraciones para el diseñoIII. Web educativa: Consideraciones para el diseño Diseño estructural

- 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.

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.

34

III. Web educativa: Consideraciones para el diseñoIII. Web educativa: Consideraciones para el diseño

- 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

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).

35

III. Web educativa: Consideraciones para el diseñoIII. Web educativa: Consideraciones para el diseño Otras consideraciones

- Compatibilidad con los navegadores- Compatibilidad de resoluciones- Facilidad de navegación- Rapidez al cargar páginas gráficas- Considerar las actualizaciones

36

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