Your SlideShare is downloading. ×
Diseno Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Diseno Web

2,369
views

Published on

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

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

Published in: Technology

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,369
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
74
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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]
  • 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 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