Creación, diseño y mantenimiento de una pagina web educativa

Transcripción

1 Centro de Profesorado de Sevilla CURSO DE FORMACIÓN CON SEGUIMIENTO USO DE INTERNET EN EL AULA Creación, diseño y mantenimiento de una pagina web educativa Ponente: Prof. JOSÉ BÉJAR VELATTA Sevilla, 13 y 15 de abril de

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 Diseño y estructura de nuestra web. 3. Aplicación FTP. 2

3 I. ASPECTOS TEÓRICOS 3

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

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

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) 6

7 3 VENTAJAS E INCONVENIENTES VENTAJAS DE UNA WEB EDUCATIVA CLASE TRADICIONAL CON MÁS RECURSOS 7

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

9 4 CRÍTERIOS DE CALIDAD CRITERIOS EVALUABLES CALIDAD DE UNA WEB EDUCATIVA Facilitar la navegación por paginas Estructurar adecuadamente la información Utilizar un estilo homogéneo Tiempo de descarga prudencial 9

10 5 LA WEB COMO HERRAMIENTA DE TELEFORMACIÓN Descarga de contenidos Agenda Foros Chat Cuestionarios de autoevaluación Secuencias de aprendizaje Glosario 10

11 II. ETAPAS O FASES DE ELABORACIÓN DE UNA WEB EDUCATIVA 11

12 ELABORACIÓN DE UNA WEB EDUCATIVA ÉTAPAS DE UNA WEB EDUCATIVA Publicación Mantenimiento Construcción Diseño de la WEB Análisis Inicial 12

13 ÉTAPAS O FASES DE ELABORACIÓN DE UNA WEB EDUCATIVA ÉTAPAS DE UNA WEB EDUCATIVA 1ª fase Análisis Inicial 13

14 1ª etapa: ANÁLISIS INICIAL TIPOLOGÍA DE WEB Web de Departamento Didáctico. Web de Asignaturas, materias o módulos. OBJETIVOS Obtener información complementaria o utilizarla como soporte a la enseñanza presencial. TARGET Público Objetivo Bachillerato. Ciclo Formativo de Grado Superior de FPE. 14

15 ÉTAPAS O FASES DE ELABORACIÓN DE UNA WEB EDUCATIVA ÉTAPAS DE UNA WEB EDUCATIVA 2ª fase Diseño de la WEB 15

16 2ª etapa: DISEÑO DE LA WEB ORGANIZACIÓN DE LA INFORMACIÓN Estructurar la información: Secciones principales, Subsecciones, enlaces, DISEÑO DE LA INTERFAZ (ESTILO GRÁFICO) Material gráfico (folletos, logotipos, ) Se elige cabecera de presentación, colores a utilizar, fondos de pantallas, tipos de letras, 16

17 Etiqueta DIV 4 PÁGINA WEB EDUCATIVA A ESTRUCTURA VISUAL DE UNA PAGINA WEB Etiqueta DIV px Top = 10 px CABECERA WEB CABECERA WEB 100 px MENÚ CONTENIDOS DE NUESTRA WEB MENÚ CONTENIDOS DE NUESTRA WEB Etiqueta DIV px 150 px 650 px PIE o FOOTER PIE o FOOTER 50 px Etiqueta DIV 3 17

18 B ESTRUCTURA VISUAL DE UNA PAGINA WEB MENÚ PRINCIPAL PIE o FOOTER 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. dptoeconomia@dptoeconomia.com 2010 All Rights Reserved Design by IES VELÁZQUEZ CABECERA WEB CONTENIDOS 18

19 C ESTRUCTURA VISUAL DE UNA PAGINA WEB Gráfico ilustrativo de fondo de cabecera Enlaces del menú Contenidos de interés Enlaces a paginas más frecuentes 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. dptoeconomia@dptoeconomia.com Nombre del dominio Objetivo de la WEB Correo electrónico Contador estadístico de visitas 2010 All Rights Reserved Design by IES VELÁZQUEZ Copyright 19

20 D MATERIAL GRATUITO DE INTERÉS CABECERAS DESCARGABLES GRATUITAS CONTADORES GRATUITOS 20

21 NUESTRA WEB EDUCATIVA Web del Departamento Didáctico de Formación y Orientación Laboral 21

22 ÉTAPAS O FASES DE ELABORACIÓN DE UNA WEB EDUCATIVA ÉTAPAS DE UNA WEB EDUCATIVA 3ª fase Construcción 22

23 HERRAMIENTAS PÁGINA WEB EDUCATIVA 3ª etapa: CONSTRUCCIÓN Las paginas web se crean en HTML EDITORES EDITORES DREAMWEAVER FRONTPAGE WEB FACIL PRO EDITORES HERRAMIENTAS DE TRATAMIENTO DE EDITORES IMAGENES PHOTOSHOP FIREFOX EDITORES PAINT SHOP PRO 23

24 HERRAMIENTAS PÁGINA WEB EDUCATIVA 3ª etapa: CONSTRUCCIÓN HERRAMIENTAS EDITORES DE GESTIÓN Herramientas de publicación FTP: WS_FTP FILEZILLA EDITORES Utilidades: CONVERSOR A PDF HERRAMIENTAS DE GENERACIÓN DE EDITORES CONTENIDOS MULTIMEDIA FLASH VIDEO 24

25 ÉTAPAS O FASES DE ELABORACIÓN DE UNA WEB EDUCATIVA ÉTAPAS DE UNA WEB EDUCATIVA 4ª fase Publicación 25

26 4ª etapa: PUBLICACIÓN VALIDACIÓN DEL SITIO WEB Determinación del sitio WEB (URL). Transferencia de archivos del sitio local al sitio remoto (servidor web). PUBLICITAR EL SITIO WEB Proporcionar la dirección a los usuarios objetivos. Enlaces en otras web. 26

27 ÉTAPAS O FASES DE ELABORACIÓN DE UNA WEB EDUCATIVA ÉTAPAS DE UNA WEB EDUCATIVA 5ª fase Mantenimiento 27

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. CAMBIOS Y MODIFICACIONES Nuevas paginas. Modificar contenidos, para su actualización. Eliminar información caducada. Corregir errores. 28

29 III. TRES ELEMENTOS BÁSICOS PARA CREAR UNA WEB EDUCATIVA 29

30 TRES ELEMENTOS BÁSICOS CREACIÓN DE UNA WEB EDUCATIVA EDITOR WEB HOSTING APLICACIÓN FTP web 30

31 1 TRES ELEMENTOS BÁSICOS CREACIÓN DE UNA WEB EDUCATIVA HOSTING web 31

32 A QUÉ ES UN HOSTING WEB? 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. 32

33 B HOSTING WEB GRATUITO Alojamiento Web Gratuito para tu Web 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. iespana 100 Mb de espacio Acceso: Web y FTP Trafico: ilimitado Nombre del dominio: Inscripción en el directorio de iespana 33

34 B HOSTING WEB GRATUITO Galeón/Hispavista 15 Mb de espacio Acceso: Web Trafico: ilimitado Nombre del dominio: Te inscriben en google, Lycos, Hot bot y Altaweb, de manera gratuita. Tripod Telepolis 1024 Mb de espacio Acceso: Web y FTP Trafico: ilimitado Nombre del dominio: 50 Mb de espacio Acceso: Web y FTP Trafico: ilimitado Nombre del dominio: 34

35 C HOSTING WEB GRATUITO UTILIZADO Alojamiento Web Gratuito para nuestra Web Educativa 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. 35

36 2 TRES ELEMENTOS BÁSICOS CREACIÓN DE UNA WEB EDUCATIVA EDITOR WEB web 36

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

38 B SOFTWARE PARA NUESTRA WEB EDUCATIVA MICROSOFT WORD Paquete de Microsoft Office versión

39 2.1 DISEÑO Y ESTRUCTURA DE NUESTRA WEB EDUCATIVA NUESTRA WEB EDUCATIVA Web del Departamento Didáctico de Formación y Orientación Laboral 39

40 DISEÑO Y ESTRUCTURA DE NUESTRA WEB EDUCATIVA NUESTRA WEB EDUCATIVA Web del Departamento Didáctico de Formación y Orientación Laboral 40

41 A PAGINA PRINCIPAL NUESTRA WEB EDUCATIVA Distribución por: ASIGNATURAS ó MODULOS PROFESIONALES y CURSOS 41

42 A PAGINA PRINCIPAL NUESTRA WEB EDUCATIVA Objetivo de la web de comunicación 42

43 B PAGINA DE ASIGNATURA / MODULOS PROFESIONALES ESTRUCTURA NIVELAR DE CADA ASIGNATURA O MODULO PROFESIONAL ASIGNATURA MODULO PROFESIONAL DOCUMENTOS GENERALES RECURSOS DIDÁCTICOS UNIDADES DIDÁCTICAS UD 1 UD 2 43

44 B PAGINA DE ASIGNATURA / MODULOS PROFESIONALES Cada unidad didáctica contiene: PRESENTACIÓN CONTENIDOS EJERCICIOS TEST DE AUTOEVALUACIÓN PRUEBAS OBJETIVAS 44

45 3 TRES ELEMENTOS BÁSICOS CREACIÓN DE UNA WEB EDUCATIVA APLICACIÓN FTP web 45

46 APLICACIÓN FTP UTILIZADA FILEZILLA Es una aplicación FTP para transferencia o subidas de archivos gratuitos. FileZilla 46

47 GRACIAS POR SU ATENCIÓN 47