View
21
Download
0
Category
Preview:
Citation preview
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
1
Centro de Profesorado de Sevilla
Sevilla, 13 y 15 de abril de 2.010
Creación, diseño y mantenimiento
de una pagina web educativa
CURSO DE FORMACIÓN CON SEGUIMIENTO
USO DE INTERNET EN EL AULA
Ponente: Prof. JOSÉ BÉJAR VELATTA
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
2
I N D I C E
I.- ASPECTOS TEÓRICOS
1. Definición de Web Educativa.
2. Enfoque práctico de una Web Educativa.
3. Ventajas e inconvenientes.
4. Criterios de calidad.
5. La web como herramienta de teleformación.
II.- ETAPAS O FASES DE ELABORACIÓN DE UNA WEB EDUCATIVA.
III.- TRES ELEMENTOS BÁSICOS PARA CREAR UNA WEB EDUCATIVA.
1. Hosting.
2. Editor WEB.
2.1. Diseño y estructura de nuestra web.
3. Aplicación FTP.
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
3
I. ASPECTOS TEÓRICOS
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
4
1 DEFINICIÓN DE WEB EDUCATIVA
Página web utilizada en el proceso de
enseñanza/aprendizaje
“Una página web utilizada en el proceso de
enseñanza-aprendizaje es un sitio web creado
para guiar o facilitar el aprendizaje de unos
determinados conocimientos”.
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
5
2 ENFOQUE PRÁCTICO DE UNA WEB EDUCATIVA
Web elaborada por profesores para la enseñanza
de una asignatura, materia o modulo profesional
Programación didáctica: objetivos, contenidos, procedimientos, evaluación
Acceso a materiales didácticos: apuntes, ejercicios, esquemas, …
Canales de comunicación interpersonal: correo, foros, …
Tablón de anuncios: noticias y novedades.
Enlaces de interés: links.
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
6
3 VENTAJAS E INCONVENIENTES
VENTAJAS DE UNA WEB EDUCATIVA
Facilita la publicación y actualización de contenidos.
Acceso permanente a la información.
Permite al alumnado estructurar su propio aprendizaje
(a que acceder y en qué orden)
Facilita la comunicación profesorado-alumnado.
Información simétrica (conocidas por todos los sectores educativos)
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
7
3 VENTAJAS E INCONVENIENTES
VENTAJAS DE UNA WEB EDUCATIVA
CLASE TRADICIONALCON MÁS RECURSOS
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
8
3 VENTAJAS E INCONVENIENTES
INCONVENIENTES DE UNA WEB EDUCATIVA
Necesidad de formación adecuada del profesorado
(TIC, diseño web, tratamiento de imágenes, … ).
La aplicación de las TIC suponen en la innovación educativa una
carga de tiempo en la elaboración del trabajo previo.
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
9
4 CRÍTERIOS DE CALIDAD
CRITERIOS
EVALUABLES
Estructurar adecuadamente la
información
Tiempo de descarga prudencial
Utilizar un estilo homogéneo
Facilitar la navegación por paginas
CALIDAD
DE UNA WEB
EDUCATIVA
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
10
5 LA WEB COMO HERRAMIENTA DE TELEFORMACIÓN
Descarga de contenidos
Agenda Foros Chat
Cuestionarios de autoevaluación
Secuencias de aprendizaje
Glosario
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
11
II. ETAPAS O FASES DE ELABORACIÓN
DE UNA WEB EDUCATIVA
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
12
ELABORACIÓN DE UNA WEB EDUCATIVA
Análisis Inicial
Diseño de la WEB
Construcción
Publicación
Mantenimiento
ÉTAPAS DE
UNA WEB EDUCATIVA
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
13
ÉTAPAS O FASES DE ELABORACIÓN
DE UNA WEB EDUCATIVA
Análisis Inicial
ÉTAPAS DE
UNA WEB EDUCATIVA
1ª fase
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
14
1ª etapa: ANÁLISIS INICIAL
• Web de Departamento Didáctico.
• Web de Asignaturas, materias o módulos.TIPOLOGÍA
DE WEB
• Obtener información complementaria outilizarla como soporte a la enseñanzapresencial.
OBJETIVOS
• Bachillerato.
• Ciclo Formativo de Grado Superior de FPE.TARGET
Público Objetivo
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
15
ÉTAPAS O FASES DE ELABORACIÓN
DE UNA WEB EDUCATIVA
Diseño de la WEB
ÉTAPAS DE
UNA WEB EDUCATIVA
2ª fase
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
16
2ª etapa: DISEÑO DE LA WEB
• Estructurar la información: Secciones principales, Subsecciones, enlaces, …
ORGANIZACIÓN DE LA INFORMACIÓN
• Material gráfico (folletos, logotipos, …)
• Se elige cabecera de presentación, coloresa utilizar, fondos de pantallas, tipos deletras, …
DISEÑO DE LA INTERFAZ
(ESTILO GRÁFICO)
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
17
A ESTRUCTURA VISUAL DE UNA PAGINA WEB
CABECERA WEB
MENÚCONTENIDOS
DE NUESTRA WEB
PIE o FOOTER
Etiqueta DIV 1
Etiqueta DIV 3
Etiq
ue
ta
D
IV
2
Etiq
ue
ta
DIV
4
CABECERA WEB
MENÚ
PIE o FOOTER
800 px
650 px
100 px
50 px
150 px
Top = 10 px
300 px
CONTENIDOS
DE NUESTRA WEB
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
18
B ESTRUCTURA VISUAL DE UNA PAGINA WEB
MENU
Link 1
Link 2
Link 3
CONTENIDOS
DE INTERES
Texto 1
Texto 2
Texto 3
Texto 4
PAGINAS AMIGAS
Google.es
Crearunaweb.net
OBJETIVO DE ESTE WEBSITE
Esto es una web de prueba, veras
que fácil es utilizar aplicaciones de
creación de paginas web y la de
posibilidades que tiene para que
puedas hacer tu propia
pagina web educativa.
www.departamentodeeconomia.com
Email: dptoeconomia@dptoeconomia.com
© 2010 All Rights Reserved • Design by IES VELÁZQUEZ
CABECERA WEB
PIE oFOOTER
MENÚ PRINCIPAL CONTENIDOS
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
19
C ESTRUCTURA VISUAL DE UNA PAGINA WEB
MENU
Link 1
Link 2
Link 3
CONTENIDOS
DE INTERES
Texto 1
Texto 2
Texto 3
Texto 4
PAGINAS AMIGAS
Google.es
Crearunaweb.net
OBJETIVO DE ESTE WEBSITE
Esto es una web de prueba, veras que fácil es
utilizar aplicaciones de creación de paginas
web y la de posibilidades que tiene para que
puedas hacer tu propia
pagina web educativa.
www.departamentodeeconomia.com
Email: dptoeconomia@dptoeconomia.com
© 2010 All Rights Reserved • Design by IES VELÁZQUEZ
Nombre del dominio
Gráfico ilustrativo de fondo de
cabecera
Objetivo de la WEB
Correo electrónico
Contador estadístico de visitas
Copyright
Enlaces del menú
Contenidos de interés
Enlaces a paginas más frecuentes
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
20
D MATERIAL GRATUITO DE INTERÉS
CABECERAS DESCARGABLES GRATUITAS www.freewebpagehedears.com/gallery/
CONTADORES GRATUITOSwww.estadisticasgratis.com
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
21
NUESTRA WEB EDUCATIVA
www.folvelazquez.net16.net
Web del Departamento Didáctico
de Formación y Orientación
Laboral
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
22
ÉTAPAS O FASES DE ELABORACIÓN
DE UNA WEB EDUCATIVA
Construcción
ÉTAPAS DE
UNA WEB EDUCATIVA
3ª fase
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
23
EDITORES
Las paginas web se crean en HTML
EDITORESEDITORES
DREAMWEAVER FRONTPAGE WEB FACIL PRO
EDITORES
HERRAMIENTAS DE TRATAMIENTO DE
IMAGENES EDITORES
PHOTOSHOP FIREFOX PAINT SHOP PRO
3ª etapa: CONSTRUCCIÓN
HE
RR
AM
IE
NTA
S
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
24
EDITORES
HERRAMIENTAS DE GENERACIÓN DE
CONTENIDOS MULTIMEDIA
FLASH
VIDEO
EDITORES
HERRAMIENTAS DE GESTIÓN EDITORES
Herramientas de publicación FTP:WS_FTP FILEZILLA
Utilidades: CONVERSOR A PDF
3ª etapa: CONSTRUCCIÓN
HE
RR
AM
IE
NTA
S
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
25
ÉTAPAS O FASES DE ELABORACIÓN
DE UNA WEB EDUCATIVA
Publicación
ÉTAPAS DE
UNA WEB EDUCATIVA
4ª fase
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
26
4ª etapa: PUBLICACIÓN
• Determinación del sitio WEB (URL).
• Transferencia de archivos del sitio local al sitio remoto (servidor web).
VALIDACIÓN DEL SITIO WEB
• Proporcionar la dirección a los usuariosobjetivos.
• Enlaces en otras web.
PUBLICITAR EL SITIO WEB
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
27
ÉTAPAS O FASES DE ELABORACIÓN
DE UNA WEB EDUCATIVA
Mantenimiento
ÉTAPAS DE
UNA WEB EDUCATIVA
5ª fase
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
28
5ª etapa: MANTENIMIENTO
Parte de la información publicada en la pagina web es perecedera, seguro que necesitará con el tiempo una revisión,
por tanto, requiere un mantenimiento continuo.
• Nuevas paginas.
• Modificar contenidos, para su actualización.
• Eliminar información caducada.
• Corregir errores.
CAMBIOS Y MODIFICACIONES
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
29
III. TRES ELEMENTOS BÁSICOS PARA
CREAR UNA WEB EDUCATIVA
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
30
TRES ELEMENTOS BÁSICOS
CREACIÓN DE UNA WEB EDUCATIVA
web
HOSTING
EDITOR
WEB
APLICACIÓN
FTP
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
31
1
TRES ELEMENTOS BÁSICOS
CREACIÓN DE UNA WEB EDUCATIVA
web
HOSTING
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
32
HOSTING
hospedar o alojar
Aplicado a Internet, significa poner
una pagina web en un servidor de
Internet para que esta pueda ser vista
en cualquier lugar del mundo con
acceso a Internet.
A ¿QUÉ ES UN HOSTING WEB?
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
33
Alojamiento Web Gratuito para tu Web
100 Mb de espacio Acceso: Web y FTP Trafico: ilimitado Nombre del dominio: http://nombre.iespana.es Inscripción en el directorio de iespanaiespana
Todas estas webs, ofrecen alojamiento gratuito para tu página web. Solamente
tienes que registrarte. Te darán un cierta cantidad de MB y una transferencia
mensual ilimitada. Aprovecha estas oportunidades, es el mejor método para
comenzar con vuestra web.
B HOSTING WEB GRATUITO
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
34
15 Mb de espacio Acceso: Web Trafico: ilimitado Nombre del dominio: http://nombre.galeon.com Te inscriben en google, Lycos , Hot bot y Altaweb, de manera gratuita.
1024 Mb de espacio Acceso: Web y FTP Trafico: ilimitado Nombre del dominio: http://usuarios.lycos.es/nombre
50 Mb de espacio Acceso: Web y FTP Trafico: ilimitado Nombre del dominio: http://club.telepolis.com/nombre
Galeón/Hispavista
Tripod
Telepolis
B HOSTING WEB GRATUITO
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
35
Alojamiento Web Gratuito para nuestra Web Educativa
C HOSTING WEB GRATUITO UTILIZADO
1500 MB de espacio en disco.
100 GB de transferencia de datos (mensuales).
Almacenar hasta 5 dominios.
5 cuentas de correo electrónico.
2 bases de datos MySQL.
Panel de control.
Simple Site Builder.
Soporte para PHP.
www.000webhost.com
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
36
web
EDITOR
WEB
2
TRES ELEMENTOS BÁSICOS
CREACIÓN DE UNA WEB EDUCATIVA
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
37
A SOFTWARE PARA WEBMASTERS
Estas herramientas para Webmasters, son totalmente gratuitas:
Editores Web gratuitos, diseña tus gif, diseña botones para tu web, creación de textos e imágenes animadas,
servidores de FTP.
Están organizadas por categorías.
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
38
B SOFTWARE PARA NUESTRA WEB EDUCATIVA
MICROSOFT WORD
Paquete de Microsoft Office versión 2003-2007
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
39
NUESTRA WEB EDUCATIVA
www.folvelazquez.net16.net
Web del Departamento Didáctico de
Formación y Orientación Laboral
2.1
DISEÑO Y ESTRUCTURA
DE NUESTRA WEB EDUCATIVA
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
40
DISEÑO Y ESTRUCTURA DE NUESTRA WEB EDUCATIVA
NUESTRA WEB EDUCATIVA
www.folvelazquez.net16.net
Web del Departamento Didáctico
de Formación y Orientación
Laboral
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
41
A PAGINA PRINCIPAL
NUESTRA WEB EDUCATIVA
www.folvelazquez.net16.net
Distribución por:
ASIGNATURAS ó
MODULOS PROFESIONALES
y CURSOS
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
42
A PAGINA PRINCIPAL
NUESTRA WEB EDUCATIVA
www.folvelazquez.net16.net
Objetivo de la web
Email de comunicación
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
43
B PAGINA DE ASIGNATURA / MODULOS PROFESIONALES
ASIGNATURA
MODULO PROFESIONAL
DOCUMENTOS
GENERALESRECURSOS DIDÁCTICOS UNIDADES DIDÁCTICAS
UD 1
ESTRUCTURA NIVELAR DE CADA
ASIGNATURA O MODULO PROFESIONAL
UD 2
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
44
B PAGINA DE ASIGNATURA / MODULOS PROFESIONALES
Cada unidad didáctica
contiene:
PRESENTACIÓN
CONTENIDOS
EJERCICIOS
TEST DE AUTOEVALUACIÓN
PRUEBAS OBJETIVAS
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
45
web
APLICACIÓN
FTP
3
TRES ELEMENTOS BÁSICOS
CREACIÓN DE UNA WEB EDUCATIVA
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
46
FILEZILLA
Es una aplicación FTP para transferencia o subidas de
archivos gratuitos.
APLICACIÓN FTP UTILIZADA
FileZilla
Prof. José Béjar Velatta
PÁGINA WEB EDUCATIVA
47
GRACIAS POR
SU ATENCIÓN
Recommended