Diseñar una Web Educativa...

y no morir en el intento

Acción formativa
IES ARICO (en GOBCAN)
IES ARICO (en dominio propio)
Lunes 29 de enero de 2009

José Miguel Lorenzo Salazar

Profesor-colaborador del
Centro del Profesorado Tenerife Sur-Abona
1
 NOTA PRELIMINAR
Los enlaces a todos los recursos que se
muestran en esta presentación están en
forma de hipervínculos.

Si haces clic en ellos, se abrirá una ventana

de tu navegador de Internet apuntando a
la dirección URL del enlace.

2
 Objetivo a largo plazo
1. Conocer las tecnologías que necesitamos para
publicar una Web Educativa en Internet.

2. (Re)Publicar la Web Educativa del IES Arico.

3. Aprender a administrar y gestionar la web del

IES Arico de la manera más eficiente posible
(optimización de los recursos humanos y de
tiempo).

3
 Objetivos a corto plazo
1. Conocer las tecnologías que necesitamos para
publicar una Web Educativa en Internet.

2. Comenzar a trabajar algunos aspectos de la Web

Educativa del IES Arico.

3. Resolver las dudas acerca del “howto” de una Web

para fines educativos (por ejemplo, cómo reactivar la
revista con ISSN del IES Arico desde HOY mismo).

4
 Expectativas/Fines de una
Web Educativa
• Mostrar información imprescindible a todos los
sectores de la comunidad educativa.

• Recibir retroalimentación por parte de sus

usuarios y visitantes.

• Facilitar el acceso a recursos en linea (por

ejemplo, la revista con ISSN del IES Arico).

• Interfaz Gráfica Amigable, atractiva, llena de

colorido, con efectos...
5
Expectativas/Fines de una
Web Educativa
• Que pueda ser fácilmente administrada por
más de una persona.

• Que sus contenidos puedan ser mantenidos

(editados, modificados y publicados) por
varias personas con los privilegios adecuados
(trabajo colaborativo del profesorado, por
ejemplo).

• Otras expectativas (¿cuáles?).

6
 ¿Una web es una
página web?
• Una web tiene una o más páginas web.
• Se estructura en forma de árbol de directorios y
archivos, como en nuestro PC.
• Cada página se compone utilizando un
lenguaje de programación para la web: el
(X)(D)(HT)ML.
• Además, se emplean otros lenguajes que
enriquecen el aspecto funcional y estético de la
página web: javascript, hojas de estilo en
cascada, flash, java, ruby on rails, etc.
7
 Ejemplo:
la web 1.0 del IES Arico

8
 Ejemplo:
la web 1.0 del IES Arico

9
 Ejemplo:
la web de REUDE del IES Arico

10
 La nueva web: ¿Web 2.0?

• Sitios web “planos”: web 1.0 (taxonomía por

directorios).

• Sitios web “con efectos”: web 2.0. (

folcsonomías por etiquetas o 'tags'). Ejemplo:
búsqueda por tags.

• Sitios web “que piensan por nosotros”:

web 3.0 (ontologías, web semántica).
11
 El concepto Web 2.0

• Aparición y mejora de lenguajes para la web.

• Separación de la estructura, el contenido y la
apariencia.
• Facilidad de integrar efectos atractivos para
los internautas.
• Posibilidad de recibir retroalimentación más
allá del email.
• Carácter social del fenómeno.

12
Los Siete Principios de la Web 2.0
• La WWW como plataforma vs software monolítico.
• Aprovecha la Inteligencia Colectiva vs información “en
texto plano”.
• La gestión de bbdd como ccbb: infoware = software +
DATOS (i.e. Amazon).
• Final del ciclo de actualizaciones del software del cliente.
• Programación ligera: búsqueda de lo simple.
• Software no limitado a un solo dispositivo (móviles).
• Experiencia enriquecedora para el usuario (SecondLife)

13
 Evolución de la Web

Fuente: Web 2.0, Antonio Fumero y Genís Roca (colabora Fernando Sáez Vacas)
Fundación Orange 14
 Evolución de la Web

Fuente: Web 2.0, Antonio Fumero y Genís Roca (colabora Fernando Sáez Vacas)
Fundación Orange 15
Terry Flew, en la tercera edición de New Media describe cual
cree que son las diferencias que caracterizan a la Web 1.0
y a la Web 2.0.

"move from personal websites to blogs and blog site

aggregation, from publishing to participation, from web
content as the outcome of large up-front investment to an
ongoing and interactive process, and from content
management systems to links based on tagging
(folksonomy)"

16
Nube de Tags de la Web 2.0
(cloud tag)

17
Nube de Tags de la Web 2.0
(cloud tag)

18
Mapa de Asociación de
Ideas de la Web 2.0

19
De dónde viene la Web 2.0

20
Mapa de Aplicaciones Web
2.0

21
El mapa de la Web 2.0

22
 Mapa Mundi Web 2.0
(con logos de webs del tipo 2.0)

23
Web 2.0 y la “cola larga”
(buzzword de 2.0: the long tail)

24
 El modelo Cliente-Servidor
• El cliente es un PC con un navegador en el
que escribimos la URL (dirección web).
• El servidor es un PC en el que están
disponibles las páginas web que deseamos
visualizar.
• Cuando el servidor recibe una petición,
sirve directamente la página o la construye
dinámicamente para enviarla al navegador
del PC cliente.
25
El modelo Cliente-Servidor

26
Tecnologías subyacentes

27
Web 1.0 versus Web 2.0

28
Las “tripas” de una página web
• El PC cliente recibe la página web en forma
de un archivo de texto conformado por
ETIQUETAS propias del lenguaje web. Es
decir, una página web es un archivo de
texto que podemos guardar en nuestro PC.

• El navegador del PC cliente INTERPRETA

las etiquetas antes de construir localmente
la página web que nos va a mostrar.
29
Las “tripas” de una página web
• Desde el navegador (Mozilla Firefox, Opera
, Internet Explorer...) podemos VER el
código interno de la página web.

• Si nosotros podemos ver el código de la

página web... cualquiera podrá hacerlo. Si
no tienes quieres que se vea algo en
Internet ... no lo pongas en la web! (i.e.
mostrar fotos)
30
Las “tripas” de una página web
• Abre una página web cualquiera.
• Haz clic sobre cualquier parte de la página
y pulsa simultáneamente las teclas
CONTROL y U.

31
Las “tripas” de una página web

32
 Llegó la hora de tomar la
primera decisión...
¿ESCRIBIMOS nosotros la página web (es
decir, escribimos el CÓDIGO a partir de
nuestros conocimientos de los lenguajes
de programación para la web)...
o UTILIZAMOS un sistema de gestión de
contenidos en el que sólo tendremos que
preocuparnos por los contenidos y su
apariencia?
33
 Llegó la hora de tomar la
segunda decisión...
¿Optamos por utilizar un servicio ONLINE
(gratuito o de pago) preconfigurado...

o contratamos (pagando una cuota anual

razonable) un “hosting” (alojamiento
externo en un PC remoto que llamaremos
“servidor”) e instalamos nosotros un
sistema de gestión de contenidos al uso?

34
Si te decides a programar...

Necesitas un EDITOR de páginas web: NVU

(gratuito y libre), DREAMWEAVER (de pago),
FRONTPAGE (integrado en Office, de pago).

Si el editor no incorpora un gestor FTP, tendrás

que utilizar un cliente FTP (un programa,
fireFTP o Filezilla, que te ayude a “subir” tus
archivos web al sitio en el que estarán
disponibles para los usuarios de Internet).

35
 Si te decides por un sistema
de gestión de contenidos...
Debes decidir varias cosas:

¿qué sistema emplearás (CMS/portal)? Joomla,

Moodle, Plone, Drupal, Wordpress, etc.
http://www.opensourcecms.org

¿en que forma estará disponible: en un servicio

online gratuito (p.e. Wordpress, Blogspot, Ning,
iGoogle...) o un servicio de hosting controlado
por ti?
36
 Sistemas de Gestión de
Contenidos
• Visita “http://php.opensourcecms.com” para
hacerte una idea de cuántos SGC existen a
disposición en Internet... de manera
GRATUITA.
• Son mantenidos por miles de usuarios:
mejoran a gran velocidad.
• Se añaden módulos que mejoran su
funcionalidad rápidamente.
• Son muy fáciles de instalar.
37
 Ejemplos de SGC
(CMS en inglés)

http://php.opensourcecms.com/

38
¿Qué necesito para montar mi
propio SGC en Internet?
• Dominio propio (i.e. www.tictictic.org)
• Si no dispones de uno, debes registrar uno (se
paga una cuota mensual, trimestrual o anual;
suele ser inferior a 10 euros/año).
• Alojamiento (espacio de disco).
• Servicio de bases de datos (MySQL/Access).
• Soporte para lenguajes del lado del servidor
(PHP/ASP).
39
 ... y puede ser interesante
poder contar con...
• acceso FTP online (problemas con ordenadores
de la red 10 del GOBCAN).
• 50 o más cuentas de correo electrónico.
• Listas y redirección de correo.
• Tareas “cron” ('cronjobs') (difícil de encontrar
por poco dinero).
• Servicio de Atención al Cliente por teléfono,
email o sistema de tickets).
• sudominios, gestión de DNS...
40
El aspecto de un cliente FTP

41
 Pero… ¿cómo lo hago?

• Registrar un dominio. ¿Cuál?

• Registrar un dominio. ¿Cómo? Algunas
compañías en España: Piensasolutions, Acens,
Arsys, Strato, 1&1, etc.
• Busca, compara y pregunta.
• Contrata un servicio de alojamiento si deseas
disponer de una Web Dinámica (GOBCAN no
da este servicio).

42
 ¿cómo lo hago (cont.)?
• Contrata un mínimo de espacio (por ejemplo
200 MB para empezar). No pagues, en este
caso, más de 100 euros/año.
• Para el registro del dominio las formas de
pago suelen ser la transferencia bancaria y
cargo en tarjeta de crédito.
• Para el hosting se suele emplear el cargo en
cuenta bancaria (domiciliación) y cargo en
tarjeta de crédito.

43
¿cómo lo hago (cont.)?

44
¿cómo lo hago (cont.)?

45
¿cómo lo hago (cont.)?

46
 ¿cómo lo hago (cont.)?

• Si haces la transferencia bancaria hoy, en 48

horas tendrás disponible el dominio y el hosting.
• Ve a la página web oficial del Sistema de
Gestión de Contenido y descarga el paquete
más actual (por ejemplo, en formato ZIP).
• Descomprime a una carpeta en tu PC el archivo
descargado.

47
 ¿cómo lo hago (cont.)?

• Sube por FTP la carpeta descomprimida.

• Ejecuta el instalador (un archivo que se suele
llamar “install.php”) siguiendo las instrucciones
de los creadores del sistema de gestión de
contenidos.
• Accede al panel de control o de configuración
(usualmente conocido como “backend”).

48
 ¿cómo lo hago (cont.)?
• Empieza a darle un toque personal al sistema
de gestión de contenidos.
• Descarga “templates”, es decir, plantillas que
modifican “de un golpe” la apariencia de todo
el sitio web.
• Descarga “idioms” o “languages”, es decir,
plantillas de idioma, para cambiar el idioma de
todo el sitio web.
• Añade modulos que doten de mayor
funcionalidad al sitio web.
49
 ¿cómo lo hago (cont.)?
• Ahora es momento de detenerse. Debes
reflexionar sobre la estructura que debe
reflejar tu sitio web: secciones, categorías,
artículos de contenido, enlaces, imágenes,
videos...
• Empieza la parte final: dotar de contenidos el
sitio web.
• Anunciar la existencia del sitio web en Internet
(i.e., quiero que mi sitio aparezca en las
búsquedas de Google).
50
 ¿Y si no tengo dominio, ni
hosting, ni nada de nada?

• Todo llega... así que puedes empezar a

utilizar alguno de los servicios gratuitos
online... ¿cuáles?

¿conoces algún servicio online, en

Internet, que sea gratuito y que te
permita “colgar” contenidos de carácter
educativo para tus alumnos?
51
Y en los IES… dónde estamos

• Tenemos alumnado del siglo XXI (alumnado analógico

por las mañanas, digital por la tarde!)

• Nosotros nos formamos en el siglo XX (como

profesores somos analógicos casi todo el tiempo).

• Todavía una gran parte del profesorado tiene

conocimientos propios del siglo XIX (cuando no existía
el ordenador y de la única revolución de la que se
hablaba era la de la Electricidad, no de la
Electrónica...)
52
 Adaptarse o morir…
Video muy simpatico de unos monjes que le
explican como funcionan los nuevos
sistemas operativos (en Youtube.com)

http://es.youtube.com/watch?
v=P3zdJ6PzAaU

53
 La Web 2.0 para el alumnado
• El alumnado genera contenidos, puede editar y
responder (Blog).
• El alumnado tiene un rol activo, comparte información,
participa y trabaja colaborativamente (Google Docs).
• La interfaz que utilizan es interactiva (iGoogle).
• Pueden utilizar fuentes múltiples de producción (Wiki).
• Forman comunidades [de aprendizaje] con facilidad
(Redes Sociales).
• El alumnado ya está parcialmente familiarizado con las
herramientas que producen actualmente la Web 3.0.

54
 Uso educativo de herramientas
sociales en Internet
• Google permite crear páginas web a todo el mundo
(Google Web Pages), al igual que la mayoría de los
ISP.
• Chats
• Foros
• Galerías de fotos (Flickr, Picasa) y videos online
(Youtube)
• Redes Sociales (Twenty, MySpace)
• Videos, radio y música online (podcasting)
55
 Uso educativo de herramientas
sociales en Internet (cont.)
• Calendario online.
• Almacenamiento online.
• Gestión de proyectos.
• Google grupos y Google Docs.
• Redes Sociales para compartir Favoritos
(del.icio.us, Technorati, Furl)
• Wikis (el paradigma: wikipedia)
• Diagramas en linea (Gliffy)
• Blogs
56
 El Blog
• Historia del Blog: bitácoras personales
(diarios) como medio de crítica de empleados
descontentos en determinadas empresas
multinacionales.,
• Fomenta la retroalimentación: el comentario y
la réplica.
• Organiza contenidos de una manera intuitiva y
funcional: categorías, etiquetas, archivo,
enlaces.
• Requiere conocimientos mínimos.
57
 El Blog como Sitio Web
• En la Web 2.0 se separan claramente la
estructura, los contenidos y los estilos de
presentación.
• El Blog se puede emplear como página web de
fácil mantenimiento.
• Fomenta la retroalimentación.
• Se puede controlar la retroalimentación que se
publica.
• Permite el registro de usuarios.
58
El Blog como Sitio Web (cont.)

• El registro requiere disponer de una cuenta de

correo electrónico válida y activa.
• El usuario que se registra debe abrir la carpeta o
bandeja de entrada de su correo electrónico y
hacer clic en el enlace de activación del registro
en el Blog.
• De esta manera se evita el acoso de los
spammers.

59
 Blog de Interculturalidad del
CEP Tenerife Sur-Abona

Veamos un ejemplo de uso del Blog, basado

en WORDPRESS, para fomentar el
intercambio de experiencias sobre la
Interculturalidad en el Ámbito Educativo: el
web-blog

http://blog.ceptenerifesurabona.es

60
Blog de Interculturalidad del
CEP Tenerife Sur-Abona

61
Blog de Interculturalidad del
CEP Tenerife Sur-Abona

62
 Enlaces a Blogs Educativos
 http://ciberespiral.net/edublogs/2007/05/13/i-premi
o-espiral-edublogs-2007/
 http://blog.educastur.es/
 http://www.maestroteca.com/browse.php3?cat=34
 http://recursostic-cole.blogspot.com/
 http://www.oei.es/tic/blog.htm
 http://www.aulablog.com/planeta/
 http://www.eduteka.org/BlogsEducacion.php

63
 Enlaces a Blogs Educativos
 http://www.interpeques2.com/
 http://iessapostol.juntaextremadura.net/blogs/ind
ex.php?blog=1
 http://www.ieszaframagon.com/
 http://altoscolegios.blogia.com/
 http://malva-rosa.blogspot.com/
 http://iesazahar.blogspot.com/
 http://2dmanjon.blogia.com/
 http://sanwalabonso.zoomblog.com/

64
Trackball, pinging…

65
 Práctica 1.1

• Registrarse en BLOGGER.
• Crear un Blog.
• Accecer al panel de control y revisar todas
sus funciones.
• Visitar la página principal del Blog y escribir
un comentario.

66
 Práctica 1.1 (cont.)
• Abrimos el navegador de Internet.
• Apuntamos a “www.blogger.com”
• Nos registramos.
• Activamos nuestro registro en Blogge a través de
nuestra cuenta de correo electrónico.
• Crea el blog.
• Accece al panel de control y revisa todas sus
funciones.
• Visita la página principal del Blog y escribe un
comentario.
67
Práctica 1.1 (cont.)

68
 Práctica 1.2
• Registrarse en WORDPRESS: es.wordpress.com
• Crear un Blog
• Accecer al panel de control y revisar todas sus
funciones.
• Visitar la página principal del Blog y escribir un
comentario

69
Práctica 1.2

70