“ Las Páginas Web: posibilidades educativas” Pedro Cuesta Morales Departamento de Informática (Universidade de Vigo) CURSO: Elaboración da páxina web docente

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

Fundamentos

Criterios de calidad

Posibilidades educativas

Elaboración de una web docente

Herramientas

1. Fundamentos WEB: Sistema de información basado en hipertexto, hoy en día hipermedia 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”) 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, ...

WEB: Sistema de información basado en hipertexto, hoy en día hipermedia

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

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

Proceso de visualización de una página Web Navegador

Sitio Web: conjunto de ficheros Un sitio Web va a estar formado por una conjunto de archivos organizados en carpetas: Páginas web: htm/html Imágenes: gif, jpg, ... Documentos: doc, ppt, pdf, ... Otros: css, swf, ... Un sitio Web también puede estar formado por información almacenada en bases de datos y recuperada dinámicamente

Un sitio Web va a estar formado por una conjunto de archivos organizados en carpetas:

Páginas web: htm/html

Imágenes: gif, jpg, ...

Documentos: doc, ppt, pdf, ...

Otros: css, swf, ...

Un sitio Web también puede estar formado por información almacenada en bases de datos y recuperada dinámicamente

Sitio Local / Servidor web 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 Espacio para alojar las páginas de los centros: http://centros.edu.xunta.es/

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

Espacio para alojar las páginas de los centros:

http://centros.edu.xunta.es/

2. Criterios de calidad Facilitar la navegación por las páginas Estructurar adecuadamente la información Utilizar un estilo homogéneo Tiempo de descarga prudencial …

Facilitar la navegación por las páginas

Estructurar adecuadamente la información

Utilizar un estilo homogéneo

Tiempo de descarga prudencial

…

Facilitar la navegación por las páginas 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. Índices siempre visibles Títulos de sección Botones de navegación, ... Poder regresar siempre a la página principal o a las principales secciones

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.

Índices siempre visibles

Títulos de sección

Botones de navegación, ...

Poder regresar siempre a la página principal o a las principales secciones

Estructurar adecuadamente la información 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 Construir una jerarquía de información eficiente para minimizar el número de pasos a través de páginas con menús “ Es recomendable que no haya que dar mas de tres clicks para llegar a la información requerida”

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

Construir una jerarquía de información eficiente para minimizar el número de pasos a través de páginas con menús

“ Es recomendable que no haya que dar mas de tres clicks para llegar a la información requerida”

Utilizar un estilo homogéneo El que todas las páginas sigan un mismo estilo: mejora la visión global del sitio ofrece una imagen corporativa y ayuda a identificarlo

El que todas las páginas sigan un mismo estilo:

mejora la visión global del sitio

ofrece una imagen corporativa y

ayuda a identificarlo

Tiempo de descarga prudencial Si las páginas están “sobrecargadas” (muchas imágenes o elementos multimedia) necesitarán mucho tiempo para cargarse El típico usuario de Internet no suele tolerar esperar demasiado tiempo para cargar una página Errores habituales: Páginas muy grandes, con muchos contenidos (imágenes, sonido, …) Páginas con fotos extraídas directamente de una cámara digital Enlaces a documentos (p.e. presentaciones powerpoint) demasiado grandes, …

Si las páginas están “sobrecargadas” (muchas imágenes o elementos multimedia) necesitarán mucho tiempo para cargarse

El típico usuario de Internet no suele tolerar esperar demasiado tiempo para cargar una página

Errores habituales:

Páginas muy grandes, con muchos contenidos (imágenes, sonido, …)

Páginas con fotos extraídas directamente de una cámara digital

Enlaces a documentos (p.e. presentaciones powerpoint) demasiado grandes, …

3. Posibilidades educativas: Webs docentes Página Web utilizada como soporte al proceso de enseñanza/aprendizaje “ Un sitio web creado para guiar o facilitar el aprendizaje de unos determinados conocimientos” Web elaborado por profesores para la enseñanza de una asignatura: Guía didáctica o programación (objetivos, contenidos, procedimientos, evaluación,...) Acceso a materiales: apuntes, ejercicios, esquemas, … Canales de comunicación interpersonal: correo, foros, ... Noticias y novedades (tablón de anuncios) Enlaces de interés, …

Página Web utilizada como soporte al proceso de enseñanza/aprendizaje

“ Un sitio web creado para guiar o facilitar el aprendizaje de unos determinados conocimientos”

Web elaborado por profesores para la enseñanza de una asignatura:

Guía didáctica o programación (objetivos, contenidos, procedimientos, evaluación,...)

Acceso a materiales: apuntes, ejercicios, esquemas, …

Canales de comunicación interpersonal: correo, foros, ...

Noticias y novedades (tablón de anuncios)

Enlaces de interés, …

Ventajas Facilita la publicación y actualización de contenidos Acceso “permanente” a la información Permite a los alumnos estructurar su propio aprendizaje (a que acceder y en qué orden) Facilita la comunicación profesor-alumno …

Facilita la publicación y actualización de contenidos

Acceso “permanente” a la información

Permite a los alumnos estructurar su propio aprendizaje (a que acceder y en qué orden)

Facilita la comunicación profesor-alumno

…

Inconvenientes Necesidad de formación adecuada del profesorado (TIC, diseño Web, tratamiento de imágenes, …)

Necesidad de formación adecuada del profesorado (TIC, diseño Web, tratamiento de imágenes, …)

Actualidad: herramientas de teleformación Descarga de contenidos Agenda Foros Chat Cuestionarios de autoevaluación Secuencias de aprendizaje Glosario, …

Descarga de contenidos

Agenda

Foros

Chat

Cuestionarios de autoevaluación

Secuencias de aprendizaje

Glosario, …

4. Elaboración de una web docente En la construcción de un sitio web entran en juego dos aspectos: Contenidos  la información que ofrece el sitio. Es importante una buena estructuración/organización de los mismos. 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.

En la construcción de un sitio web entran en juego dos aspectos:

Contenidos  la información que ofrece el sitio. Es importante una buena estructuración/organización de los mismos.

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.

4. Elaboración de una web docente Etapas: Análisis inicial Diseño de la Web Construcción Publicación Mantenimiento

Etapas:

Análisis inicial

Diseño de la Web

Construcción

Publicación

Mantenimiento

Análisis inicial ¿Qué pretendemos con la Web? /¿Cuáles son los objetivos del sitio Web que queremos construir? Web de una materia, de un departamento, de un centro, … Ofrecer información complementaria o utilizarla como soporte a la enseñanza presencial Es importante conocer el perfil del usuario de nuestra Web, ¿A quien va dirigido? P.e. no la organizaremos igual para alumnos de educación infantil que para alumnos de bachillerato ¿Qué información/contenidos queremos ofrecer? Y ¿cómo organizarlos?

¿Qué pretendemos con la Web? /¿Cuáles son los objetivos del sitio Web que queremos construir?

Web de una materia, de un departamento, de un centro, …

Ofrecer información complementaria o utilizarla como soporte a la enseñanza presencial

Es importante conocer el perfil del usuario de nuestra Web, ¿A quien va dirigido?

P.e. no la organizaremos igual para alumnos de educación infantil que para alumnos de bachillerato

¿Qué información/contenidos queremos ofrecer? Y ¿cómo organizarlos?

Diseño de la Web Organización de la información : Estructurar información: secciones principales – subsecciones Diseño de la interfaz (estilo gráfico): Se tiene en cuenta (si existe) material gráfico existente (folletos, logos, etc.) Se realizan bocetos en papel o utilizando herramientas gráficas Se eligen colores a utilizar, fondo, tipos de letra, ...

Organización de la información :

Estructurar información: secciones principales – subsecciones

Diseño de la interfaz (estilo gráfico):

Se tiene en cuenta (si existe) material gráfico existente (folletos, logos, etc.)

Se realizan bocetos en papel o utilizando herramientas gráficas

Se eligen colores a utilizar, fondo, tipos de letra, ...

Construcción Utilizando herramientas adecuadas se crean las páginas y los contenidos que se van a ofrecer (siguiendo las normas de estilo definidas) Texto, imágenes,… Enlaces entre páginas (elementos de navegación),… Probar la corrección del sitio: Visualización (navegador) Enlaces, …

Utilizando herramientas adecuadas se crean las páginas y los contenidos que se van a ofrecer (siguiendo las normas de estilo definidas)

Texto, imágenes,…

Enlaces entre páginas (elementos de navegación),…

Probar la corrección del sitio:

Visualización (navegador)

Enlaces, …

Publicación Una vez construido y validado el sitio Web hay que publicarlo en Internet Proceso de transferencia de archivos desde un ordenador local a un servidor Web Determinación de la dirección del sitio (URL) “ Publicitar” el sitio: Proporcionar la dirección a los usuarios a los que va dirigida Enlazar en otras Webs Proporcionar la URL al suministrar otra información

Una vez construido y validado el sitio Web hay que publicarlo en Internet

Proceso de transferencia de archivos desde un ordenador local a un servidor Web

Determinación de la dirección del sitio (URL)

“ Publicitar” el sitio:

Proporcionar la dirección a los usuarios a los que va dirigida

Enlazar en otras Webs

Proporcionar la URL al suministrar otra información

Mantenimiento Parte de la información publicada en el web es perecedera , seguro que necesitará con el tiempo una revisión  necesidad de mantenimiento “ Una Web es realmente útil si está actualizada” Cambios: Nuevas páginas, modificar contenidos, eliminar información “caducada”, y… corregir errores! Proceso: Realizar cambios en nuestro equipo local y volver a publicar las modificaciones (o todo el sitio Web)

Parte de la información publicada en el web es perecedera , seguro que necesitará con el tiempo una revisión  necesidad de mantenimiento

“ Una Web es realmente útil si está actualizada”

Cambios:

Nuevas páginas, modificar contenidos, eliminar información “caducada”, y… corregir errores!

Proceso:

Realizar cambios en nuestro equipo local y volver a publicar las modificaciones (o todo el sitio Web)

5. Herramientas Las páginas Web se crean en HTML Editores: Dreamweaver, Frontpage, … Contienen gráficos/imágenes Herramientas de tratamiento de imágenes: Photoshop, Firefox, Paint Shop Pro, … Contenidos multimedia: flash, video, … Herramientas de generación de contenidos multimedia Herramientas de publicación (ftp, …): WS_FTP, filezilla, … Utilidades: Conversión a PDF, …

Las páginas Web se crean en HTML

Editores: Dreamweaver, Frontpage, …

Contienen gráficos/imágenes

Herramientas de tratamiento de imágenes: Photoshop, Firefox, Paint Shop Pro, …

Contenidos multimedia: flash, video, …

Herramientas de generación de contenidos multimedia

Herramientas de publicación (ftp, …):

WS_FTP, filezilla, …

Utilidades:

Conversión a PDF, …

HTML HTML (“ Hypertext Markup Language ”): lenguaje en el que se escriben las páginas web U n conjunto de códigos especiales o &quot;etiquetas&quot;, que le indican al navegador Web cómo mostrar un documento de hipertexto Las etiquetas de HTML empiezan por “ < “, seguido del nombre de la etiqueta y por “>”. Por ejemplo: Etiquetas independientes: <HR>,<BR>, .... Etiquetas por pares, con una etiqueta de comienzo y otra de finalización : <B> texto </B>

HTML (“ Hypertext Markup Language ”): lenguaje en el que se escriben las páginas web

U n conjunto de códigos especiales o &quot;etiquetas&quot;, que le indican al navegador Web cómo mostrar un documento de hipertexto

Las etiquetas de HTML empiezan por “ < “, seguido del nombre de la etiqueta y por “>”. Por ejemplo:

Etiquetas independientes: <HR>,<BR>, ....

Etiquetas por pares, con una etiqueta de comienzo y otra de finalización : <B> texto </B>

Estructura básica de una página web (html) <HTML> <HEAD> <TITLE> Título del documento</TITLE> </HEAD> <BODY> Contenido del documento </BODY> </HTML> “ Una página web es un archivo de texto”

<HTML>

<HEAD>

<TITLE> Título del documento</TITLE>

</HEAD>

<BODY>

Contenido del documento

</BODY>

</HTML>

Edición de páginas web: Cualquier editor de texto (p.e. Bloc de Notas): Escribe los códigos correspondientes de la página y se almacena con la extensión “htm” o “html” Inconveniente: dominar el lenguaje HTML Utilizar programas específicos para la creación de páginas web: FrontPage, Dreamweaver, ... Pensados para facilitar la creación de sitios web Editores WYSIWYG (“What You See Is What You Get”) Navegador : simplemente interpreta las etiquetas y permite la navegación por los contenidos hipermedia

Cualquier editor de texto (p.e. Bloc de Notas):

Escribe los códigos correspondientes de la página y se almacena con la extensión “htm” o “html”

Inconveniente: dominar el lenguaje HTML

Utilizar programas específicos para la creación de páginas web: FrontPage, Dreamweaver, ...

Pensados para facilitar la creación de sitios web

Editores WYSIWYG (“What You See Is What You Get”)