Diseno Web
-
Upload
aldo-velasquez-huerta -
Category
Technology
-
view
2.390 -
download
0
description
Transcript of Diseno Web
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
Robert Aldo Velásquez HuertaMg. Informática y Multimedios
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