Este documento presenta los elementos fundamentales para el diseño de un portal web educativo. Explica los tipos de espacios web de interés educativo, conceptos técnicos como hojas de estilo y elementos multimedia, y las fases clave del diseño como la investigación, planificación y desarrollo. También describe los componentes materiales y lógicos de una página web, así como las funciones y aportaciones de los espacios web para facilitar la enseñanza y el aprendizaje.

2. Presentado por:
Licda. Dhayllys Martínez
Licda. Ana J. Disla Cabrera
Lic. Carlos Alberto Lagombra Flete
Ing. Ledy Cabrera Morales
Maestría en Gestión de la
Tecnología Educativa
Asignatura:
Elementos de Diseño de un Portal WEB
Maestro/Guía:
Javier Andrés Reinoso Gil
25 de Agosto 2018

3. Contenidos
Los espacios Web
1.1 Tipología de los espacios Web de interés Educativos.
1.2 Algunos conceptos técnicos a propósitos de las páginas Web.
1.3 Elementos de una página Web.
1.4 Elementos Materiales y elementos Lógicos.
1.5 Fases para el diseño de un sitio Web educativo.
1.6 La génesis de la idea inicial la elaboración del diseño educativo.
1.7 Funciones y aportaciones de los espacios Web.

5. 1.1 Tipología de los espacios Web de
interés Educativos.
Los tipos de espacios web de interés educativo se
convierten en herramientas motivadoras e
innovadoras en el proceso de enseñanza
aprendizaje ya que son agentes dinamizadores que
enriquecen y retroalimentan el que hacer del
docente y la aprehensión del conocimiento por
parte del alumno.

6. Tipos de espacios web de interés
educativo
Tiendas virtuales.
Entornos virtuales de
teleformación.
Publicaciones
electrónicas (materiales
didácticos on-line, webs
temáticos, prensa
electrónica).
Webs de presentación
(webs de profesores,
webs de centros
educativos, webs de
escuelas).
Centros de recursos y
bibliotecas.
Entornos de
comunicación
interpersonal.
Portales Educativos .

7. 1.2 Algunos conceptos técnicos a
propósitos de las páginas Web.

8. Páginas WEB
Entendemos por sitio web (o simplemente web) un
conjunto de páginas web interrelacionadas mediante
enlaces hipertextuales o programas al efecto (realizados
con lenguajes tipo Java, JavaScript), que se muestran a
través de Internet con unos propósitos concretos:
Presentar
información
sobre un
tema.
Hacer
publicidad.
Distribuir
materiales.
Instruir sobre
un tema
determinado.

9. Algunos conceptos técnicos a
propósitos de las páginas Web.
Hojas de estilo Imágenes
Imágenes
mapeadas
Lenguaje htlm y
programación
asociada
Metáforas de la
web
Sonido
Vídeo Website

10. Hojas de estilo
(CSS, Cascading Style Sheet).
En los navegadores más avanzados
las hojas de estilo recogen un
conjunto de características
comunes a una serie de páginas
web del website.
Así cuando convenga, cambiando
una característica de la hoja de
estilo automáticamente
cambiará en todas las páginas
web asociadas.

11. Imágenes
- IMÁGENES GIF (Graphics Interchange Format): Las
imágenes GIF utilizan un máximo de 256 colores (8 bits) y
permite configurar el fondo de las imágenes transparente.
También hay imágenes GIF animadas (GIF98A), pero no hay
que abusar de ellas.
- IMÁGENES JPG (Joint Photographic Expert): Las
imágenes JPG pueden soportar paletas de 16 millones de
colores (24 bits). Ofrecen más calidad que las GIF.
- IMÁGENES PNG (Portable Network Graphics): Nuevo
formato que reúne las mejores propiedades de JPG y GIF.
Aún no lo soportan todos los navegadores.

12. Imágenes mapeadas
Imágenes (como por ejemplo un mapa) que
presentan zonas diferenciadas y cada una de
estas zonas tiene un hipervínculo específico.

13. Lenguaje HTLM y programación
asociada
• (HiperText Markup Language): Lenguaje con el que se escriben las
páginas web.HTML
• (Common Gateway Interfice): Programas que se ejecutan en los
ordenadores y procesan la información que reciben de los clientes.CGI
• Programas (generalmente formato CLASS) que se ejecutan en los
ordenadores clientes. Son independientes de la plataforma.APPLETS JAVA:
•Tienen también unas características similares.CONTROLES ACTIVE X.
• Forman parte del lenguaje HTML dinámico; son programas que se
insertan totalmente en las páginas web y se ejecutan en los
ordenadores clientes.
JAVA SCRIPS:
• Programas que deben instalarse en los ordenadores clientes para
que sus navegadores puedan reconocer y procesar determinados
tipos de archivo (Flash, Director, Real Audio...)
PLUG-INS:
• Se encargan de estandarizar y homogeneizar las sucesivas versiones
de HTML .W3 CONSORTIUM:

14. Metáforas de la Web
Establece el entorno audiovisual, sistema de
navegación e interacción de la web y algún
otro entorno atractivo y bien conocido por los
usuarios.
Refleja de manera intuitiva las funcionalidades
que ofrece la web y como están organizados
sus elementos .

15. SONIDO
- SONIDO MID: Sus archivos ocupan poco tamaño
pero la calidad del sonido es baja.
- SONIDO REAL AUDIO: Los archivos de sonido
Real Audio (RA) están muy comprimidos, pero es
necesario instalar plug-ins para que los
navegadores puedan interpretarlos.
- SONIDO WAV: Los archivos de sonido WAV dan
una calidad aceptable pero son de gran tamaño.

16. Vídeo
VÍDEO MPG:
Archivos de vídeo con una alta compresión MPEG. Es necesario disponer de determinado
software y/o hardware para que los navegadores puedan interpretarlos.
VÍDEO MOV:
Son archivos de vídeo de Quick Time.
VÍDEO AVI:
Son los archivos de vídeo habituales de Microsoft para Windows.

17. Website
Son carpetas donde están los archivos
correspondientes a un conjunto de páginas
web interrelacionadas entre ellas.
El archivo que contiene la página web principal
de un website se suele llamar: ÍNDEX.HTM.

19. Elementos que toda página
Web debe tener
• Cabecero, Barras o artilugios para la disposición de Menús, Títulos visibles de páginas y
publicaciones, Barras laterales, Áreas de Widgets, Pie de página.
Elementos comunes a las diferentes
páginas del sitio Web
• Cajas y espacios de texto, Cajas y espacios para las imágenes, Galerías de imágenes,
Secciones de portafolio, Botones interactivos, Divisor de secciones o separador
Elementos para la disposición
de contenidos en las páginas
• Reproductores de Vídeo, Reproductores de audio, Deslizador o carrusel de imágenes,
Deslizador de vídeo
Reproductores multimedia
• Cajas con pestañas horizontales, Acordeón o persianaElementos expandibles
• Sección de Categorías, Sección de Etiquetas, Campos de búsqueda
Elementos para facilitar la organización o
filtración de los contenidos
• Llamadas a la acción, Elementos para la inserción de publicidad o banners, Espacios o
cajas testimoniales, Tablas de precios, Fichas de productos
Elementos para la captación, persuasión o
venta de productos o servicios
• Formulario de contacto, para el seguimiento e interacción social, Campos para mostrar o
exhibir comentarios, Formularios de suscripción, Formularios específicos
Elementos para establecer contacto o
facilitar la comunicación bidireccional
• Cajas o espacios para la información de perfil, Navegador de publicaciones, Deslizador
de publicaciones, Contadores, Campos para la introducción de código
Elementos con características singulares

22. 1.4 Elementos Materiales y
elementos Lógicos.

23. Elementos materiales
Textos.
Elementos multimedia (imágenes, sonido, vídeo…).
Enlaces (internos de página, internos de website,
externos).

24. Elementos lógicos:
Contenidos.
Sistema de navegación.
Entorno audiovisual de las
páginas.
Actividades.
Interacciones.

25. 1.5 Fases para el diseño de un
sitio Web educativo.

26. Fases para el diseño de un sitio Web
educativo.
La creación de una página web o el desarrollo a
medida de un proyecto para el diseño de una
página web, existen al menos, 6 etapas esenciales.
Investigación Planificación
Arquitectura y
contenido del
sitio web
Diseño web,
construir y
testar
Operar,
optimizar y
evaluar
Después del
lanzamiento

27. 1.6 La génesis de la idea inicial la
elaboración del diseño educativo.

28. La génesis de la idea inicial
Hay que partir de una idea inicial que considere los objetivos educativos
que se pretenden.
Las características de los destinatarios del website.
Los contenidos que se presentarán.
La forma en la que se mostrarán.
También se esbozarán las actividades (en algunos casos interactivas) que se
propondrán a los estudiantes para facilitar la comprensión de los contenidos y
asegurar el logro de sus objetivos.

29. • ¿Qué se pretende? ¿Por qué se hace?
OBJETIVOS
• ¿A quién va dirigido?
DESTINATARIOS
• ¿Qué contenidos se presentarán? ¿Cómo se
organizará la información? Y Redacción de los
contenidos
CONTENIDOS
• Organización del website, hipervínculos..
NAVEGACIÓN
• ¿Qué metáfora se utilizará para la navegación?
¿Cómo se presentará la información en las
páginas?
ENTORNO AUDIOVISUAL
• Además de la interactividad propia de la navegación por
el website, ¿las páginas presentarán algún tipo
de actividades interactivas?
ACTIVIDADES E
INTERACCIONES.
La génesis de la idea inicial la
elaboración del diseño educativo.

30. 1.7 Funciones y aportaciones de los
espacios Web.

31. Funciones y aportaciones de los
espacios Web.
Internet pone a nuestra
disposición (en los centros
educativos nuestra misma casa
y en cualquier momento) una
serie de funcionalidades
básicas que nos abren infinitas
nuevas posibilidades de
desarrollo personal y de
gestión de nuestras actividades
familiares, laborales, lúdicas...
y por supuesto formativas.

32. Funciones y aportaciones de los
espacios Web.
Facilitar la búsqueda y localización de información.
Facilitar la obtención (o distribución) de materiales educativos on-line.
Proporcionar (o editar) información relacionada con las actividades de los centros docentes.
Posibilitar la comunicación con otras personas.
Publicar en Internet, facilitar la realización de aprendizajes.
Realización de gestiones administrativas y comerciales (telegestiones)
Actuar como medio publicitario.
Entretener .
Motivar.

33. Fuentes
• http://peremarques.pangea.org/tipoweb.htm
• https://sites.google.com/site/angelita3006/tipologia-de-espacios-
web-de-interes-educativo
• http://peremarques.net/diswguio.htm
• http://peremarques.net/glosweb.htm
• http://www.newclick.es/etapas-diseno-web-creacion-diseno-
web.php
• http://www.ingeniovirtual.com/elementos-para-el-diseno-de-
paginas-web/