Las Páginas Web: posibilidades educativas

6,565 views

Published on

Fundamentos. Criterios de calidad. Posibilidades educativas. Elaboración de una web docente.
Herramientas.

Published in: Technology
2 Comments
5 Likes
Statistics
Notes
  • es un sistema de presentación de documentos. es un sitio web esta formado por informacion almacenada en bases de datos :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thanq its very nice along with useful to me in thinking about innovation comes along with think of in which.... really nice function.... tanq for this.....
    Sharika
    http://winkhealth.com http://financewink.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,565
On SlideShare
0
From Embeds
0
Number of Embeds
222
Actions
Shares
0
Downloads
0
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Las Páginas Web: posibilidades educativas

  1. 1. “ Las Páginas Web: posibilidades educativas” Pedro Cuesta Morales Departamento de Informática (Universidade de Vigo) CURSO: Elaboración da páxina web docente
  2. 2. Índice <ul><ul><li>Fundamentos </li></ul></ul><ul><ul><li>Criterios de calidad </li></ul></ul><ul><ul><li>Posibilidades educativas </li></ul></ul><ul><ul><li>Elaboración de una web docente </li></ul></ul><ul><ul><li>Herramientas </li></ul></ul>
  3. 3. 1. Fundamentos <ul><li>WEB: Sistema de información basado en hipertexto, hoy en día hipermedia </li></ul><ul><ul><li>Hipertexto : es un sistema de presentación de documentos en el que las diferentes páginas que contienen la información no siguen una secuencia lineal, sino que se relacionan a través de enlaces entre ellas (“link”) </li></ul></ul><ul><ul><li>Hipermedia: es un sistema de presentación de información que utiliza más de un medio en un mismo documento: texto, imágenes, sonido, animaciones, formularios, ... </li></ul></ul>
  4. 4. Proceso de visualización de una página Web Navegador
  5. 5. Sitio Web: conjunto de ficheros <ul><li>Un sitio Web va a estar formado por una conjunto de archivos organizados en carpetas: </li></ul><ul><ul><li>Páginas web: htm/html </li></ul></ul><ul><ul><li>Imágenes: gif, jpg, ... </li></ul></ul><ul><ul><li>Documentos: doc, ppt, pdf, ... </li></ul></ul><ul><ul><li>Otros: css, swf, ... </li></ul></ul><ul><li>Un sitio Web también puede estar formado por información almacenada en bases de datos y recuperada dinámicamente </li></ul>
  6. 6. Sitio Local / Servidor web <ul><li>Aunque la creación de las páginas se hace en un equipo local es necesario alojarlas en un equipo conectado permanentemente a la red  Servidor Web </li></ul><ul><li>Espacio para alojar las páginas de los centros: </li></ul><ul><ul><li>http://centros.edu.xunta.es/ </li></ul></ul>
  7. 7. 2. Criterios de calidad <ul><li>Facilitar la navegación por las páginas </li></ul><ul><li>Estructurar adecuadamente la información </li></ul><ul><li>Utilizar un estilo homogéneo </li></ul><ul><li>Tiempo de descarga prudencial </li></ul><ul><li>… </li></ul>
  8. 8. Facilitar la navegación por las páginas <ul><li>Uno de los aspectos más importantes es que el usuario no se pierda en la estructura del web, que sepa en todo momento donde está y como moverse entre las diferentes secciones. </li></ul><ul><ul><li>Índices siempre visibles </li></ul></ul><ul><ul><li>Títulos de sección </li></ul></ul><ul><ul><li>Botones de navegación, ... </li></ul></ul><ul><li>Poder regresar siempre a la página principal o a las principales secciones </li></ul>
  9. 9. Estructurar adecuadamente la información <ul><li>El objetivo tiene que ser ofrecer al usuario la información que desea con el mínimo de pasos posibles y en el tiempo más corto </li></ul><ul><li>Construir una jerarquía de información eficiente para minimizar el número de pasos a través de páginas con menús </li></ul><ul><li>“ Es recomendable que no haya que dar mas de tres clicks para llegar a la información requerida” </li></ul>
  10. 10. Utilizar un estilo homogéneo <ul><li>El que todas las páginas sigan un mismo estilo: </li></ul><ul><ul><li>mejora la visión global del sitio </li></ul></ul><ul><ul><li>ofrece una imagen corporativa y </li></ul></ul><ul><ul><li>ayuda a identificarlo </li></ul></ul>
  11. 11. Tiempo de descarga prudencial <ul><li>Si las páginas están “sobrecargadas” (muchas imágenes o elementos multimedia) necesitarán mucho tiempo para cargarse </li></ul><ul><li>El típico usuario de Internet no suele tolerar esperar demasiado tiempo para cargar una página </li></ul><ul><li>Errores habituales: </li></ul><ul><ul><li>Páginas muy grandes, con muchos contenidos (imágenes, sonido, …) </li></ul></ul><ul><ul><li>Páginas con fotos extraídas directamente de una cámara digital </li></ul></ul><ul><ul><li>Enlaces a documentos (p.e. presentaciones powerpoint) demasiado grandes, … </li></ul></ul>
  12. 12. 3. Posibilidades educativas: Webs docentes <ul><li>Página Web utilizada como soporte al proceso de enseñanza/aprendizaje </li></ul><ul><ul><li>“ Un sitio web creado para guiar o facilitar el aprendizaje de unos determinados conocimientos” </li></ul></ul><ul><li>Web elaborado por profesores para la enseñanza de una asignatura: </li></ul><ul><ul><li>Guía didáctica o programación (objetivos, contenidos, procedimientos, evaluación,...) </li></ul></ul><ul><ul><li>Acceso a materiales: apuntes, ejercicios, esquemas, … </li></ul></ul><ul><ul><li>Canales de comunicación interpersonal: correo, foros, ... </li></ul></ul><ul><ul><li>Noticias y novedades (tablón de anuncios) </li></ul></ul><ul><ul><li>Enlaces de interés, … </li></ul></ul>
  13. 13. Ventajas <ul><li>Facilita la publicación y actualización de contenidos </li></ul><ul><li>Acceso “permanente” a la información </li></ul><ul><li>Permite a los alumnos estructurar su propio aprendizaje (a que acceder y en qué orden) </li></ul><ul><li>Facilita la comunicación profesor-alumno </li></ul><ul><li>… </li></ul>
  14. 14. Inconvenientes <ul><li>Necesidad de formación adecuada del profesorado (TIC, diseño Web, tratamiento de imágenes, …) </li></ul>
  15. 15. Actualidad: herramientas de teleformación <ul><li>Descarga de contenidos </li></ul><ul><li>Agenda </li></ul><ul><li>Foros </li></ul><ul><li>Chat </li></ul><ul><li>Cuestionarios de autoevaluación </li></ul><ul><li>Secuencias de aprendizaje </li></ul><ul><li>Glosario, … </li></ul>
  16. 16. 4. Elaboración de una web docente <ul><li>En la construcción de un sitio web entran en juego dos aspectos: </li></ul><ul><ul><li>Contenidos  la información que ofrece el sitio. Es importante una buena estructuración/organización de los mismos. </li></ul></ul><ul><ul><li>Diseño gráfico  la interfaz utilizada. Un diseño atractivo aporta calidad al sitio. Sin olvidar que ha de facilitar la navegación por los contenidos. </li></ul></ul>
  17. 17. 4. Elaboración de una web docente <ul><li>Etapas: </li></ul><ul><ul><li>Análisis inicial </li></ul></ul><ul><ul><li>Diseño de la Web </li></ul></ul><ul><ul><li>Construcción </li></ul></ul><ul><ul><li>Publicación </li></ul></ul><ul><ul><li>Mantenimiento </li></ul></ul>
  18. 18. Análisis inicial <ul><li>¿Qué pretendemos con la Web? /¿Cuáles son los objetivos del sitio Web que queremos construir? </li></ul><ul><ul><li>Web de una materia, de un departamento, de un centro, … </li></ul></ul><ul><ul><li>Ofrecer información complementaria o utilizarla como soporte a la enseñanza presencial </li></ul></ul><ul><li>Es importante conocer el perfil del usuario de nuestra Web, ¿A quien va dirigido? </li></ul><ul><ul><li>P.e. no la organizaremos igual para alumnos de educación infantil que para alumnos de bachillerato </li></ul></ul><ul><li>¿Qué información/contenidos queremos ofrecer? Y ¿cómo organizarlos? </li></ul>
  19. 19. Diseño de la Web <ul><li>Organización de la información : </li></ul><ul><ul><li>Estructurar información: secciones principales – subsecciones </li></ul></ul><ul><li>Diseño de la interfaz (estilo gráfico): </li></ul><ul><ul><li>Se tiene en cuenta (si existe) material gráfico existente (folletos, logos, etc.) </li></ul></ul><ul><ul><li>Se realizan bocetos en papel o utilizando herramientas gráficas </li></ul></ul><ul><ul><li>Se eligen colores a utilizar, fondo, tipos de letra, ... </li></ul></ul>
  20. 20. Construcción <ul><li>Utilizando herramientas adecuadas se crean las páginas y los contenidos que se van a ofrecer (siguiendo las normas de estilo definidas) </li></ul><ul><ul><li>Texto, imágenes,… </li></ul></ul><ul><ul><li>Enlaces entre páginas (elementos de navegación),… </li></ul></ul><ul><li>Probar la corrección del sitio: </li></ul><ul><ul><li>Visualización (navegador) </li></ul></ul><ul><ul><li>Enlaces, … </li></ul></ul>
  21. 21. Publicación <ul><li>Una vez construido y validado el sitio Web hay que publicarlo en Internet </li></ul><ul><ul><li>Proceso de transferencia de archivos desde un ordenador local a un servidor Web </li></ul></ul><ul><ul><li>Determinación de la dirección del sitio (URL) </li></ul></ul><ul><li>“ Publicitar” el sitio: </li></ul><ul><ul><li>Proporcionar la dirección a los usuarios a los que va dirigida </li></ul></ul><ul><ul><li>Enlazar en otras Webs </li></ul></ul><ul><ul><li>Proporcionar la URL al suministrar otra información </li></ul></ul>
  22. 22. Mantenimiento <ul><li>Parte de la información publicada en el web es perecedera , seguro que necesitará con el tiempo una revisión  necesidad de mantenimiento </li></ul><ul><li>“ Una Web es realmente útil si está actualizada” </li></ul><ul><li>Cambios: </li></ul><ul><ul><li>Nuevas páginas, modificar contenidos, eliminar información “caducada”, y… corregir errores! </li></ul></ul><ul><li>Proceso: </li></ul><ul><ul><li>Realizar cambios en nuestro equipo local y volver a publicar las modificaciones (o todo el sitio Web) </li></ul></ul>
  23. 23. 5. Herramientas <ul><li>Las páginas Web se crean en HTML </li></ul><ul><ul><li>Editores: Dreamweaver, Frontpage, … </li></ul></ul><ul><li>Contienen gráficos/imágenes </li></ul><ul><ul><li>Herramientas de tratamiento de imágenes: Photoshop, Firefox, Paint Shop Pro, … </li></ul></ul><ul><li>Contenidos multimedia: flash, video, … </li></ul><ul><ul><li>Herramientas de generación de contenidos multimedia </li></ul></ul><ul><li>Herramientas de publicación (ftp, …): </li></ul><ul><ul><li>WS_FTP, filezilla, … </li></ul></ul><ul><li>Utilidades: </li></ul><ul><ul><li>Conversión a PDF, … </li></ul></ul>
  24. 24. HTML <ul><li>HTML (“ Hypertext Markup Language ”): lenguaje en el que se escriben las páginas web </li></ul><ul><li>U n conjunto de códigos especiales o &quot;etiquetas&quot;, que le indican al navegador Web cómo mostrar un documento de hipertexto </li></ul><ul><li>Las etiquetas de HTML empiezan por “ < “, seguido del nombre de la etiqueta y por “>”. Por ejemplo: </li></ul><ul><ul><li>Etiquetas independientes: <HR>,<BR>, .... </li></ul></ul><ul><ul><li>Etiquetas por pares, con una etiqueta de comienzo y otra de finalización : <B> texto </B> </li></ul></ul>
  25. 25. Estructura básica de una página web (html) <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Título del documento</TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>Contenido del documento </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>“ Una página web es un archivo de texto”
  26. 26. Edición de páginas web: <ul><li>Cualquier editor de texto (p.e. Bloc de Notas): </li></ul><ul><ul><li>Escribe los códigos correspondientes de la página y se almacena con la extensión “htm” o “html” </li></ul></ul><ul><ul><li>Inconveniente: dominar el lenguaje HTML </li></ul></ul><ul><li>Utilizar programas específicos para la creación de páginas web: FrontPage, Dreamweaver, ... </li></ul><ul><ul><li>Pensados para facilitar la creación de sitios web </li></ul></ul><ul><ul><li>Editores WYSIWYG (“What You See Is What You Get”) </li></ul></ul>Navegador : simplemente interpreta las etiquetas y permite la navegación por los contenidos hipermedia

×