http://delicious.

com/velaldo
http://facebook.com/velaldo
http://velaldo.wordpress.com

Planificación del Sitio

Web educativo º

Mg. Aldo Velásquez Huerta

[email protected]
 Planificación del Sitio Web
Conceptos básicos

Sistema mundial de redes de computadoras,

integrado por las diferentes redes de cada país
Internet
del mundo, por medio del cual un usuario en
cualquier computadora puede acceder a
información de otra computadora y tener
inclusive comunicación directa con otros
usuarios en otras computadoras.

El protocolo TCP/IP (Protocolo de control

del transmisión/Protocolo de internet), es
la base del internet, permite la
comunicación entre computadoras
 Planificación del Sitio Web
Conceptos básicos

• Dirección IP es un número que identifica de manera lógica a

un dispositivo (pc) en la red. Expresados con números
decimales de cuatro octetos (0 y 255) Ejn. 164.12.123.65
• Domain Name System (DNS) es una base de datos
distribuida y jerárquica que almacena información asociada a
nombres de dominio y direcciones IP.
Ejm. Dominio: velaldo.com
Dirección IP: 74.55.181.122
• Nombres Dominio, tienen dos o más etiquetas separadas
por puntos.
mail.uigv.edu.pe
Sub dominio Nombre Dominio de nivel
Genérico
máquina superior
Geográfico
(hostname)
 Planificación del Sitio Web
Conceptos básicos

• Uniform Resource Locator, (URL) localizador uniforme de

recurso, es la cadena de caracteres con la cual se asigna una
dirección única a cada uno de los recursos de información
disponibles en la Internet.
• Una URL comienza con el nombre de su esquema, seguida
por dos puntos y nombre de la máquina.
Protocolo://máquina/directorio/fichero
Ejm.
http://www.velaldo.com
ftp://ftp.velaldo.com
 Planificación del Sitio Web
Conceptos básicos

Protocolos y servicios más usuales:

• Web (www), servicio más popular basado en HTTP (Hyper

Text Transfer Protocol) para transmitir páginas Web en HTML
(Hyper Text Markup Languaje)
• Correo electrónico (e-mail), utiliza el protocolo SMTP
(Simple Mail Transfer Protocol)
• Trasferencia de ficheros entre dos computadores, utiliza el
protocolo FTP (File Transfer Protocol)
 Planificación del Sitio Web
Conceptos básicos

Un sitio web es el conjunto de páginas web

Sitio Web relacionadas y archivos necesarios (imágenes,
vídeos, etc.) comunes a un dominio de Internet.
 Planificación del Sitio Web
Conceptos básicos

Es un documento electrónico escrito en HTML

que se visualiza mediante un navegador.
Página Web Esta compuesta por información en texto,
elementos multimedia (gráficos, video, sonido,
animación) y otros componentes para darle
interactividad.
 Planificación del Sitio Web
Sitio Web
Tipos de sitios Web x Tecnología/Construcción

• Estáticas. Son páginas construidas con HTML, son las más

comunes y simples, contienen textos, imágenes, videos,
animaciones e imágenes animadas. Los usuarios no pueden
modificar sus contenidos, el diseñador es el responsable.
• Dinámicas. Son páginas que varían en función al usuario,
personalizando su información. Generalmente soportan
bases de datos y otros lenguajes de programación web
(xhtml, php, etc.) ejm. Foros, blog, portales…
• Animadas. Son páginas construidas empleando programas
para animaciones (Flash)
 Planificación del Sitio Web
Sitio Web
Tipos de sitios Web x Objetivo/Función

• Comercial. Su finalidad es realizar actividades económicas,

pueden ser corporativas, promocionales.
• Informativos. Su propósito es difundir información de
acuerdo al tipo de audiencia.
• Personales. Buscan presentar las expresiones de sus
creadores con audiencia e información variada.
• Educativos. Se orienta a proporcionar recursos y contenidos
educativos a docentes y estudiantes.
 Planificación del Sitio Web
Web educativo

¿La Web en el contexto educativo?

Web de interés
La web puede ser
educativo empleado como medio
para llevar a cabo
ciertos aprendizajes,
esto quiere decir que
se pueden aprender
Web educativas
cosas a partir de la
información y recursos
que proporciona
cualquier sitio Web
 Planificación del Sitio Web
Web educativo

La Web en el contexto educativo

¿Para qué?

Web educativa

“… se denominan Web educativos a espacios Web que

ha sido diseñados con el propósito específico de
facilitar determinados aprendizajes o de proporcionar
recursos didácticos para los procesos de enseñanza y
de aprendizaje” (Marqués, 2002)
 Planificación del Sitio Web
Web educativo: aportes

• Apertura un nuevo medio para la educación al facilitar el

acceso a los recursos, actividades y contenidos de los cursos
y posibilita su actualización permanente, constituyéndolo en
una bases de datos de recursos educativos.
• Facilita los procesos de enseñanza – aprendizaje, ampliando
los canales de comunicación, interacción y colaboración entre
los sujetos de la educación
• Canaliza el acceso a fuentes de información seleccionada y
validada, reduciendo los riesgos de la red en las actividades
formativas
 Planificación del Sitio Web
Web educativo
Tipos de Web educativo x Objetivo
acuerdo al objetivo:
Informativas: Brinda información sobre las actividades y
servicios de las instituciones y organizaciones educativas,
además de fomentar la comunicación entre los miembros de la
comunidad educativa y la población. Ej. Web del la Institución
Educativa

Formativas: Brindan recursos y actividades para lograr el

aprendizaje, establece comunicación entre los sujetos de la
educación para desarrollar actividades de orientación y
proyectos colaborativos. Ej. Web del curso
 Planificación del Sitio Web
Web educativo: tipos
Web de recursos.

• Proporciona y distribuye información educativa y recursos

para apoyar los procesos de E-A por grupos y niveles

http://www.educ.ar/educar/index.html
 Planificación del Sitio Web
Web educativo: tipos
Web institucionales o del centro educativo.

• Potencia la comunicación institucional y la vinculación con el

centro, su función principal es informativa y comunicativa
sobre la organización, naturaleza, actividades, servicios o
recursos.

http://www.casuarinas.edu.pe/
 Planificación del Sitio Web
Web educativo: tipos
Web docentes.

• Espacio generado por el docente con recursos y actividades,

herramientas comunicativas y colaborativas para apoyar el
aprendizaje de los estudiantes, además de posibilitar
compartir experiencias.

http://www.velaldo.com
 Planificación del Sitio Web
Web educativo: tipos
Web de asignaturas

• Medio que favorece los procesos de E-A apoya la

autoformación, presenta la programación, actividades,
recursos, y favorece la comunicación más allá de la clase
presencial.

http://www.dimf.upct.es
 Planificación del Sitio Web
Tipos de Web educativo
Web de alumnos o de la clase

• Generada por los estudiantes con apoyo de los docentes,

para favorece la integración y comunicación de la clase, y
presentar las vivencias y experiencias del trabajo en clases.

http://minikienses.com/
 Planificación del Sitio Web
Tipos de Web educativo
Web de publicaciones.

• Permite la publicación de artículos y trabajos realizado por los

docentes y estudiantes, posibilita la expresión y análisis de la
comunidad educativa.

http://bartolome.wordpress.com/
 Planificación del Sitio Web
Diseño de Web educativo
¿Qué necesito para tener un sitio Web educativo

• Dominio. Nombre que identifique el sitio web el internet.

• Hosting. Alojamiento del sitio web en un servidor para ser
accedido por los usuarios
• Diseño del sitio Web. Creación del diseño y maquetación de
los elementos: texto, imágenes. Videos, sonidos.
• Programación. Traducir el diseño a un código que pueda ser
leído por los navegadores
 Planificación del Sitio Web
Diseño de Web educativo: Modelos
 Modelo de Góngora (2000)
Área de información:
• Del temario, objetivos, contenidos, metodología, sistema de
evaluación.
• Recursos bibliográficos de interés
• Enlaces de interés educativo relacionados con el tema.
Área de fundamentación didáctica:
• Objetivos
• Contenidos
• Estrategias metodológicas
• Sistemas de evaluación
Área de módulos didácticos:
• Página de acceso al material didáctico
• Foro electrónico
• Página de cabecera de cada módulo
• Página de desarrollo de los módulos didácticos
 Planificación del Sitio Web
Diseño de Web educativo: Modelos
 Modelo de Gil (2001)
Secciones de carácter general:
• Comprende la presentación de información relacionada a
la planificación de los contenidos, noticias, enlaces de
interés, FAQ, descargas, cuestionarios y recursos de
comunicación como el foro
Sección de materiales:
• Comprende la presentación de los contenidos como
páginas Web o archivos vinculados.
• Incluyen todos los documentos y páginas web
relacionados con los temas tratados en la asignatura, así
como propuesta de actividades, ejercicios de
autoevaluación y ejercicios de hetero evaluación.
 Planificación del Sitio Web
Diseño de Web educativo: Modelos

 Modelo de Area (2005)

- Debe guiar o facilitar el aprendizaje de determinados
conocimientos
- Presentase contenido científico comprensible, adaptado a
los usuarios e integrado a un programa didáctico.
- Elementos que considera:
• Presentación de la programación de la asignatura
• Desarrollo de los contenidos del temario.
• Listado de las actividades o prácticas
• Recursos de comunicación para la clase: Foros y chat
• Canales para la atención personalizada: Tutoría
• Publicación de noticias relacionadas con la asignatura
• Colección de enlaces o direcciones Web seleccionadas
• Información sobre los docentes
 Planificación del Sitio Web
Diseño de Web educativo: Modelos

 Modelo para la Web 2.0

• Pasar de un modelo de Web de lectura a una de lectura-
escritura. De espectador y consumidor convertirse en creador y
generador de contenidos, estudiante participa de manera activa.
• Aprovechar la red como una plataforma de aplicaciones para
promover la creatividad en la producción de materiales y
recursos educativos
• Presentación de los contenidos en diferentes formatos y nuevas
formas embediendo desde la fuente.
• Posibilitar el aprendizaje social a través de la inclusión de
herramientas para el trabajo colaborativo y la inserción de redes
sociales y comunidades virtuales para compartir experiencias y
recursos.
• Organizar y compartir los recursos y enlaces mediante
marcadores sociales
 Planificación del Sitio Web
Diseño de Web educativo: Elementos

 Textos: Establecer los propósitos que se persigue con su

elaboración y su empleo educativo.
¿Para que se requiere el sitio web educativo?

 Requiere la definición de los objetivos educacionales del sitio,

para determinar las características, contenidos, herramientas.
Ej.
• Presentar la imagen y actividades de la institución
educativa ante la comunidad educativa y el contexto local
• Ofrecer a la comunidad educativa (docentes y
estudiantes) acceso a recursos, actividades necesarias
para los procesos de enseñanza y aprendizaje.
 Planificación del Sitio Web
Diseño de Web educativo: Componentes
 Pedagógico - Educativo
- Objetivos
- Audiencia
- Contenidos
 Informático - Estructural
- Estructura general del web
- Sistema de navegación
- Servicios interactivos, tecnología
 Comunicacional - Interfaz -
- Estructura de las páginas (marcos, tablas, CSS)
- Composición de los elementos(textos, fondos, imágenes,
íconos, tablas, marcos)
 Planificación del Sitio Web
Diseño de Web educativo: Planificación
 Objetivos: Propósitos que se persigue con la elaboración y el
empleo educativo del sitio.
¿Para que se requiere el sitio web educativo?

 Requiere la definición de los objetivos educacionales (central

y secundarios) del sitio con verbos que expresen las acciones
a realizar.
 De los objetivos se desprenden las tareas, contenidos y
herramientas para su logro. Ej.
• Presentar la imagen y actividades de la institución educativa
ante la comunidad educativa y el contexto local
• Ofrecer a la comunidad educativa (docentes y estudiantes)
acceso a recursos, actividades necesarias para los procesos
de enseñanza y aprendizaje.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Audiencia: Población a las que se orientará el sitio web

educativo.
¿A quienes va dirigido la página Web?

 Identificar los principales usuarios (publico).

 Definir la audiencia (ident-kit) caracterizando: la capacidad
física, capacidad técnica, conocimientos, necesidades de
información, preferencias, ubicación geográfica.
 Información posibilita establecer los criterios del diseño de
contenidos, lenguaje, interfaz y la forma como se presentarán
los elementos que debe contener el Web site.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación
 Contenidos: Comprende la definición de la información y
recursos que se presentará de forma organizada en la
página Web.
¿Qué contenidos y cómo se organizarán para
presentarlos?

• Seleccionar los contenidos en función de los objetivos y

necesidades de información y aprendizajes de los usuarios.
• Agrupar los contenidos en bloques de información (áreas de
contenidos) en función a las características del formato y las
relaciones de los bloques (las páginas).
• Estructurar el árbol de contenidos organizando las secciones
y niveles.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Contenidos: Aspectos didácticos y pedagógicos

 Utilizar organizadores previos para introducir los temas.

 Adecuar a las motivaciones y necesidades de los usuarios
 Desarrollo secuencial lógico.
 Volumen de la información debe ser el necesario para su
comprensión.
 La información debe ser actualizada y válida.
 Evitar los errores ortográficos y la construcción correcta de
frases.
 Los mensajes no deben ser negativos no fomentar la
discriminación.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación
 Contenidos : Árbol de contenidos
 Es el diagrama (tronco y ramas) que muestra cuántas las
secciones y tendrá el sitio y cuanto niveles habrá dentro de
cada uno.
 Secciones: Son las áreas de los contenidos agrupadas y que
concentran las acciones del usuario.
 Niveles: Es un área específica de los contenidos dentro del
sitio, no deben considerarse más de tres niveles de acceso.
 Contenidos relacionados: Elementos que dan funcionalidad a
la web: buscador, formulario de contacto, FAQ, etc.
• Árbol organizacional: Agrupa los contenidos como se
organiza la institución en la lógica de su actividad.
• Árbol funcional: Agrupa los contenidos de acuerdo a la tareas
que se pueda realizar en el sitio
 Planificación del Sitio Web
Diseño de Web educativo: Planificación
Contenidos : Árbol de contenidos

Portada

Programación Actividades Recursos Foro Chat Comunicaciones

Sílabos Tareas Lecturas Contacto

Agenda Ejercicios Manuales Avisos

Webquest Videos

Presentaciones
 Planificación del Sitio Web
Diseño de Web educativo: Planificación
 Contenidos para la Web docente:

• A cerca de. Presentación del docente (portafolio)

• Institución. Presentación de la institución del docente
• Cursos. Webs de las asignaturas o apuntes del docente
• Actividades. Actividades de investigación
• Producción. Presenta la producción intelectual y de recursos
• Enlaces. Acceso a herramientas o servicios (descargas,
programas, recursos, fuentes de información, etc.)
• Agenda. Programación de actividades
• Comunicación. Presenta canales de comunicación (e-mail,
foro, chat, blog, videoconferencia)
 Planificación del Sitio Web
Diseño de Web educativo: Planificación
 Contenidos para la Web de asignatura:

• Programación. Presenta la programación del curso: Objetivos,

contenidos, metodologías, evaluaciones, agenda, etc.
• Recursos. Ofrece una colección de recursos necesarios para
apoyar el aprendizaje de la asignatura: lecturas, manuales,
presentaciones, videos, programas, enlaces, etc.
• Actividades. Brinda diversas actividades de aprendizajes
como Webquest, actividades colaborativas, lecturas,
actividades interactivas, etc.
• Comunicación. Presenta canales de comunicación (e-mail,
foro, chat, blog, videoconferencia) para facilitar la interacción
docente-alumno, alumno-alumno.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Estructura del sitio: Es la forma que tendrá el sitio de forma

general con sus secciones, funcionalidades y sistema de
navegación.
Consideraciones:
• 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.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Estructura del sitio:

Estructura de datos, es
la organización de las
carpetas y archivos del
site, basado en el árbol
de contenidos.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Estructura de navegación:
• Establece la forma como se relaciona y accede a las
páginas de las secciones del web site a través de enlaces
o hipervínculos.
• La estructura de navegación en función a las relaciones
de los bloques, puede ser:

lineal Jerárquica mixta Red

 Planificación del Sitio Web
Diseño de Web educativo: Planificación
 Estructura de navegación:
Esquema de navegación entre archivos y directorios del web
site

index.html

programa.html index.html index.html foro.html chat.html contacto.html

actividades recursos
 Planificación del Sitio Web
Diseño de Web educativo: Planificación
 Estructura de navegación: elementos
• Menú general. Presente en todo el sitio, permite el acceso a
las diferentes áreas.
• Pié de página. Indica información del diseño y enlaces
textuales del menú general.
• Ruta de acceso. Muestra el trazado de las páginas (camino) y
enlace entre el Inicio y la actual.
• Botón inicio. Retorna a la portada del sitio
• Botón mapa del sitio. Visualiza el mapa del sitio
• Buscador.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Estructura de las páginas: Se refiere a los aspectos de la

visualización de la página Web
¿Cómo se deben ver la página los usuarios?

• Definir la estructura de las páginas, definir los componentes

de cada una de las páginas.
• Determinar la ubicación de los componentes, tranzando
diagramas de las pantallas del sitio (wireframes).
• Los elementos gráficos deben enmarcarse a los objetivos y
aspectos culturales del publico.
• No se debe “decorar” o “adornar” con componentes que
distorsionan el mensaje.
• La estética no debe adecuarse a los gustos y preferencia de
los responsables.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Estructura de las páginas:

Elementos:
• Encabezado. Debe contener la información y logo del sitio.
• Menú general: Permite el acceso a cada una de las áreas del
sitio
• Ruta de acceso: Muestra el trazado de la página que hay
entre las páginas con la portada del sitio.
• Cuerpo de contenidos: Área en la que se presenta los
contenidos del sitio.
• Pie de página: Además de los datos institucionales, muestra
los enlaces textuales a las áreas del sitio
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Estructura de las páginas: Diagramación

Diseño con marcos «frames», agrupa varias páginas que se
despliegan simultáneamente sobre una principal.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Estructura de las páginas: Diagramación

Diseño con tablas, permiten organizar los componentes de la
mejor forma.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación
 Estructura de
las páginas:
Plano de la
estructura
diagramación
manual
(Wireframe)
 Planificación del Sitio Web
Diseño de Web educativo: Planificación
 Estructura de
las pantallas:
Plano de la
estructura
diagramación
digital.
(Wireframe)
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Diseño de las pantallas:

Dibujos digitales de la forma que tendrán las páginas
principales del sitio que se desarrolla
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Aspectos técnicos: Textos

• Estructurar los textos en párrafos cortos presentando la idea
con exactitud.
• No utilizar diversidad de fuentes en las páginas, utilizar las
estándares.
• El tamaño debe permitir la legibilidad.
• Color del texto debe permitir su legibilidad, con alto contraste
entre el fondo de la página y el color del texto.
• El uso de mayúsculas debe limitarse a los títulos y
encabezados.
• Los subrayados deben prescindirse cuando no sean enlaces.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Aspectos técnicos: Fondos

• De acuerdo a los objetivos educativos pueden ser: color
sólido, matizado o degradado, texturas, fotografías,
imágenes, etc.
• Utilizar fondos simples que las mejoren la presentación de las
páginas.
• Los fondos no deben interferir la legibilidad del texto y la
rápida visualización.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Aspectos técnicos: Imágenes

• Deben complementar la información que aporta el texto, debe
reducirse su presencia decorativa.
• Las imágenes pueden ser: ilustrativas o explicativas, icónicas,
botones, parceladoras, decorativas.
• Los formatos deben posibilitar controlar el tamaño y calidad
de la imagen (jpg, bmp, gif, png)
• La resolución debe ser adecuada porque esta relacionada con
la calidad y el peso del archivo. (pixeles)
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Aspectos técnicos: Colores

• Los colores dan personalidad y estilo a las páginas. Es
necesario una correcta elección de la gama y tonalidades.
• Determinar la tonalidad del sitio, se tienen los colores fríos
(azules y celestes, verdes y violetas) y los colores cálidos
(rojizos, anaranjados, amarillos y marrones), los grises
actúan como neutralizadoras.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Aspectos técnicos: Colores

• Establecer una paleta de colores de acuerdo a los estilos del
sitio

http://www.colourlovers.com/palettes/add
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Aspectos técnicos: Sonido

• Los sonidos deben emplearse para transmitir información, con
un objetivo comunicativo.
• Reducir su empleo como fondo hace más lenta la carga de la
página, reduce la atención.
• Se debe considerar la posibilidad de control del usuario en la
ejecución de los audios.
 Planificación del Sitio Web
Diseño de Web educativo: Planificación

 Aspectos técnicos: Video

• La inclusión debe darse con un objetivo educativo, y nueva
forma de presentar la información.
• Insertar los videos con tecnología streaming para optimizar la
descarga y reproducción.
 Planificación del Sitio Web
Preguntas y comentarios

Gracias

La tecnología educativa, no es más que la

evolución en la enseñanza de la educación la
cual es usada como herramienta para facilitar un
aprendizaje eficaz.
Cairlins Morales