Diseño de Páginas Web y Portales Educativos Unidad I. Semiología aplicado al diseño multimedia de páginas Web. Sección de Post Grado Doctorado en Educación Robert Aldo Velásquez Huerta Mg. Informática y Multimedios [email_address]
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
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)
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
I. Internet:  Aplicaciones   Consultar Periódicos  -  Webs de los periódicos y revistas  -  Ofrecen la misma información que las ediciones impresas
I. Internet:  Aplicaciones   Acceso a Bases de Datos -  Bases de datos de investigaciones  -  Accesos a bibliotecas
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.
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
I. Internet:  Aplicaciones   Crear Información -  Construir su propia página Web -  Generar una bitácora  (Blogs)
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
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
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,
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.)
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.
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.
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
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.
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.
II. Portal:  Aplicaciones Educativas
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
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
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
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)
III. 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)
III. 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
III. Web educativa:  Prediseño ¿para que? OBJETIVOS ¿qué,cuánto? CONTENIDOS ¿para quienes? PUBLICO ¿cómo? ESTRUCTURA ¿cómo? VISUALIZACION Se determinan mutuamente Qué les interesa Cómo buscarán Orientación Estética/ Cultura/ Gustos Cómo se encuentran las cosas Cómo se organizan Qué contener para cumplirlos
III. 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
III. 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.
III. 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.
III. Web educativa:  Estructuras Jerárquica lineal 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
III. 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.
III. 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
III. 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.
III. 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).
III. 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
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

Diseno Web

  • 1.
    Diseño de PáginasWeb y Portales Educativos Unidad I. Semiología aplicado al diseño multimedia de páginas Web. Sección de Post Grado Doctorado en Educación Robert Aldo Velásquez Huerta Mg. Informática y Multimedios [email_address]
  • 2.
    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 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 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 Consultar Periódicos - Webs de los periódicos y revistas - Ofrecen la misma información que las ediciones impresas
  • 6.
    I. Internet: Aplicaciones Acceso a Bases de Datos - Bases de datos de investigaciones - Accesos a bibliotecas
  • 7.
    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 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 Crear Información - Construir su propia página Web - Generar una bitácora (Blogs)
  • 10.
    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 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 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 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 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 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? 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 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 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
  • 20.
    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
  • 21.
    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 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? 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ó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ó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ño ¿para que? OBJETIVOS ¿qué,cuánto? CONTENIDOS ¿para quienes? PUBLICO ¿cómo? ESTRUCTURA ¿cómo? VISUALIZACION Se determinan mutuamente Qué les interesa Cómo buscarán Orientación Estética/ Cultura/ Gustos Cómo se encuentran las cosas Cómo se organizan Qué contener para cumplirlos
  • 27.
    III. 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
  • 28.
    III. 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.
  • 29.
    III. 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.
  • 30.
    III. Web educativa: Estructuras Jerárquica lineal 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
  • 31.
    III. 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.
  • 32.
    III. 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
  • 33.
    III. 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ñ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ñ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 yla 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