INTERNETYLAWEB 2.

0
internetylaweb2.0
Material elaborado para la optativa de CAM

ÍNDICE

SESIÓN 1: ¿QUE ES INTERNET? 2

¿QUE ES LA WEB?
MÁS SOBRE LA WEB
LA WEB 2.0

SESIÓN 2 PÁGINAS WEB: PÁGINAS ESTÁTICAS 6

GESTORES DE CONTENIDOS: PÁGINAS
DINÁMICAS

SESIÓN 3 EL BLOG 8
ESTRUCTURA DE UN BLOG
PANEL DE ADMINISTRACIÓN DEL BLOG

SESIONES 4 Y 5 ADMINISTRAR UN BLOG EN BLOGGER 10

SOLAPA DE DISEÑO

SESIÓN 6 CREACIÓN DE ENTRADAS 13

REALIZAR UN ENLACE
AÑADIR UN IMAGEN

2
 internetylaweb2.0
Material elaborado para la optativa de CAM

SESIÓN 1______________________________________________

¿QUÉ ES INTERNET?
Es una red de ordenadores mundial que están conectados entre sí. Para ello
utilizan protocolos TCP/IP.
Protocolo:
Se conoce como protocolo de
comunicaciones a un conjunto
de reglas que especifican el
intercambio de datos u órdenes
durante la comunicación entre
sistemas.

¿QUÉ ES LA WEB?
La World Wide Web (WWW), conocida comúnmente como la web, se compone
de un sistema de documentos relacionados entre sí mediante hipervínculos que
permiten su visualización en ordenadores conectados a la red.
Hipervínculo:
Un hipervínculo (también
llamado enlace, vínculo,
hiperenlace o link) es un
elemento de un documento
electrónico que hace referencia
a otro recurso, por ejemplo, otro
documento o un punto
específico del mismo o de otro
documento.

• Términos asociados:
Servidor: ordenador remoto que tiene instalados los programas necesarios
para enviar los documentos requeridos por un ordenador cliente.
Ordenador cliente: aquel que estando conectado a Internet, realiza una
petición de documentos en lenguaje HTML (páginas web) que se visualizarán
mediante programas navegadores.
Navegador: software (programa) instalado en el ordenador del cliente que
permite visualizar documentos lenguaje HTML (páginas web) y que permite el
funcionamiento de los hiperenlaces. Los navegadores más utilizados son
Internet Explorer, Mozilla Firefox y Netscape.
URL: dirección que tiene un servidor para un archivo HTML (página web). Por
ejemplo: http://www.google.es/
HTTP: se define como protocolo de transferencia de hipertexto. Al incluir este
término cuando escribimos una dirección, el servidor reconocerá que se está
pidiendo un documento web.
HTML: estas iniciales definen el término Hipertext Markup Languaje, que se
traduce del inglés como “Lenguaje de marcado de hipertextos”. Los archivos
creados en este formato tienen extensiones .html o .htm. Una explicación
sencilla sería: el lenguaje utilizado para crear páginas web.

3
internetylaweb2.0
Material elaborado para la optativa de CAM
MÁS SOBRE LA WEB
En un principio la web era un grupo de herramientas de trabajo utilizadas
por los científicos del CERN (Organización Europea para la Investigación
Nuclear). Posteriormente pasó a ser un espacio global para la información en el
que participaban millones de usuarios, pero en el que estos actuaban de un
modo pasivo.
En la actualidad la web ha entrado en una fase social y participativa. Y
esta tendencia ha generado la sensación de que la Web se ha convertido, y ha
dado lugar a una versión nueva: la Web 2.0.
Se suele hablar de la una wed estática a la primera y una web dinámica
a la última.

Webmaster:
Es un término comúnmente
usado para referirse a las
personas responsables de un
sitio web específico.

LA WEB 2.0
“La web 2.0 es el escenario en el que convergen los usuarios, los servicios, los
medios y las herramientas”. Se trata de servicios que se ofrecen a través de la
Web y que se desarrollan en un navegador.

4
 internetylaweb2.0
Material elaborado para la optativa de CAM
ACTIVIDAD 1
Después de ver el minidocumental, titulado Web 2.0 y Educación, anotad
cuatro conceptos que hayan aparecido y describe que es lo que has entendido
acerca de ellos.

SESIÓN 2______________________________________________

PÁGINAS WEB: PÁGINAS ESTÁTICAS

Como se ha explicado anteriormente el lenguaje utilizado para realizar las
páginas web es el lenguaje HTML.
Este lenguaje se basa en las llamadas etiquetas, que vienen a ser órdenes o
instrucciones de lo que tiene que aparecer en la imagen en cada momento en
la página. Las etiquetas se caracterizan por estar encerradas entre los
símbolos <>, añadiendo la barra / indicaremos la finalización de la orden.
Cada etiqueta tiene asignado un significado. Por ejemplo <head>, significa
encabezado de la página o <title> define el título

Aunque la creación de una página web utilizando el lenguaje HTML no es un

procedimiento difícil, si es un proceso lento. Por esta razón se han desarrollado
numerosos programas que permiten crear una página web de una forma
gráfica. Estos programas editores de páginas web se denominan editores
WYSIWIG (What You See Is What You Get, que significa lo que ves es lo que
obtienes). Algunos de ellos son FrongPage que entra dentro del paquete Office
de Microsoft, Dreamweaver de Adobe o Kompozer dentro del software libre
desarrollado bajo licencia GNU

En la página oficial puedes descargarte el programa: http://www.kompozer.net/

5
internetylaweb2.0
Material elaborado para la optativa de CAM
También existe una versión portable que podrás descargarte en Educastur
desde la Mochila Digital

GESTORES DE CONTENIDOS: PÁGINAS DINÁMICAS

Los gestores de contenidos son aplicaciones que se encuentran en el servidor
para crear páginas web dinámicas, que nos permiten administrar el diseño del
sitio de forma independiente a su contenido, de modo que cuando cambiamos
el diseño no afecta al contenido y cuando cambiamos el contenido el diseño no
se ve alterado.
Los gestores de contenidos podemos modificarlos desde nuestro ordenador
conectándonos a Internet.
Para trabajar independientemente diseño y contenido y evitar complicaciones,
las páginas web dinámicas te dan a elegir entre diversas plantillas, en las
cuales nosotros nos encargamos de introducir los contenidos: artículos,
enlaces, categorías…. El diseño de estas plantillas puede ser fijo, pero la
mayoría de ellas permiten personalizar muchos aspectos relativos a la
composición, al color, al tipo de letra, a la imagen de la presentación, etc.

• El blog:
Es el medio más extendido de la wed 2.0. Se
trata de una especie de diario, que recopila
artículos por fechas presentados
cronológicamente apareciendo en primer
lugar el último creado. Su nombre en español
es bitácora. Un usuario puede crear un blog y
administrarlo incluyendo en él contenidos,
enlaces, imágenes. Los lectores pueden
participar en él con comentarios a los que
puede contestar su creador entablando un
diálogo. Existen muchos ejemplos:
Audiovisio o Las TIC en Plástica son algunos
de ellos.
ACTIVIDAD 2
Entra en el blog Audiovisio o Las TIC en
Plástica a través de Google y observa la
distribución de los diferentes partes.
•• El wiki:
Es un sitio colectivo en el que el grupo
participante puede editar publicar, modificar y
construir su propio conocimiento. El ejemplo
más conocido es la Wikipedia.
ACTIVIDAD 3
Una vez que sabe lo que es un Wiki,
prueba a entrar en la página
http://educacionplasticayvisual.wikispaces.c
om/ perteneciente a luciaag a través de
Google y observa las diferentes partes.

6
 internetylaweb2.0
Material elaborado para la optativa de CAM
• El foro:
Lugares de opinión o debate, generalmente de carácter temático. Suelen
presentarse como complemento en otros sitios web formando grupos de interés
común.

SESIÓN 3______________________________________________

EL BLOG
Blog proviene de abreviar la palabra inglesa weblog, compuesta a su vez de
web y de log. Esta última significa diario por lo que ahora resultará más fácil
comprender que es un blog.

Un blog es un sitio de Internet en el que de forma periódica una persona o

grupo de personas pueden publicar noticias, o artículos. A esa persona la
llamamos administrador, y a la noticia o artículo lo denominamos entrada. En
español un blog recibe el nombre de bitácora.
Los artículos aparecen en la pantalla en orden cronológico, del más reciente al
más antiguo según te desplazas hacia la zona inferior de la pantalla y todos
ellos se acompañan de un título y de la fecha de su publicación.

ESTRUCTURA DE UN BLOG

Aunque puede variar en función del diseño, básicamente tienen tres partes bien
diferenciadas:
• Cabecera: es el lugar donde va el título y una imagen (dependiendo de
la plantilla podrás o no elegir una tuya o no).
• Columna central: es el lugar donde aparecen las entradas, en las que
aparecerá el título de la entrada, la fecha, el contenido, un enlace para
hacer comentarios y las etiquetas que hayas signado al artículo.
• Columna lateral: aquí aparecerán para accesorios o Gadget, como por
ejemplo:
 Archivo del blog
 Buscador
 Listado de blogs
 Listado de enlaces
 Textos
 Presentaciones

7
internetylaweb2.0
Material elaborado para la optativa de CAM
 Vídeos
ACTIVIDAD 4
Entra en el blog La Huella Digital a través de Google y observa la distribución
de los diferentes partes.

PANEL DE ADMINISTRACIÓN DEL BLOG

Para poder personalizar tu blog puedes acceder al panel de administración.

Para entrar como administrador es imprescindible haber entrado con tu nombre
de usuario y contraseña. En el caso de Blogger, en la parte superior tendrás un
enlace para realizar entradas o para personalizar cuando tú quieras aspectos
de diseño o de contenido.
El de la imagen es un blog creado para la optativa de Comunicación
Audiovisual.
En las solapas de la parte superior tienes opción a entrar en:
• Creación de entradas
• Configuración
• Diseño
• Monetizar
Las que más nos interesan son de momento son la de Creación de entradas, la
de Configuración (para algunos aspectos) y desde luego la de diseño, en la que
podrás manipular el diseño de la plantilla para adaptarla a tu gusto y a tus
necesidades.

8
 internetylaweb2.0
Material elaborado para la optativa de CAM
ACTIVIDAD 5
Teclea Blogger en la barra de Google pues te vas a disponer a crear tu propio
blog. Antes de nada piensa en el nombre. Sigue los pasos que te van
indicando en la pantalla. Escribe tu primer artículo que tratará de una
bienvenida y publícalo. Anota el nombre de tu blog y dáselo a tu profesor/a.

SESIÓN 4 Y 5___________________________________________

ADMINISTRAR UN BLOG EN BLOGGER

Cada sitio tiene sus propias características. Nosotros vamos a practicar con las
de Blogger.

Para acceder como administradores en vuestro blog podéis entrar en la página

de Blogger e introducir vuestro nombre de usuario y contraseña. Esto os dará
acceso al Escritorio.
Desde el Escritorio podéis dar paso a varias acciones:
• Ver el blog
• Crear nuevas entradas.
• Acceder directamente a las solapas del panel de administración
• Editar entradas
• Configuración
• Diseño
• Monetizar
• Ver listados de blogs

9
internetylaweb2.0
Material elaborado para la optativa de CAM
ACTIVIDAD 6
Entra en tu blog creado en Blogger para Comunicación Audiovisual. A partir de
ahora el tema de este blog va a estar dedicado a la materia. Desde el
escritorio accede directamente a Configuración.
• Cambia el nombre del blog por otro que haga referencia a la signatura,
pero en el que también incluyas un aspecto personal (nombre,
apellido…).
• Escribe un texto de bienvenida explicando el tema del blog.
• Dentro de la solapa de Configuración entra en Comentarios y
asegúrate que está activo Mostrar y que en Moderación de
Comentarios esté activa la opción Siempre (de este modo podrás
controlar los comentarios que aparecerán en tu blog).

Una vez que te encuentres en el panel de administración del blog, podrás

acceder a las demás solapas pulsando simplemente sobre ellas.

SOLAPA DE DISEÑO
Vamos a centrarnos en la solapa de Diseño, en la que tendrás la posibilidad de
elegir entre otras “subsolapas”:
 Elementos de página
 Fuentes y colores
 Edición HTML
 Seleccionar plantilla nueva

La que aparece por defecto es la primera, Elementos de página:

ELEMENTOS DE PÁGINA
Esta solapa es muy interesante, pues en ella puedes cambiar aspectos
relacionados con el diseño y con el contenido en la barra de navegación, la

10
 internetylaweb2.0
Material elaborado para la optativa de CAM
cabecera, las entradas o incluir en la columna lateral enlaces imágenes,
vídeos, presentaciones, listados de enlaces, etc.

A. Cabecera
La cabecera se distingue porque en ella aparece el título y el texto con una
breve descripción. Podéis editarlos siempre que queráis aunque no es bueno
cambiarlo si el blog responde a unos objetivos previamente establecidos. Es
mejor pensarlo un poco más y mantenerlos fijos.
También podéis incluir una imagen en la misma. Es posible que tengáis que
adaptar el tamaño de la misma. Dependerá del diseño elegido pero es
conveniente que el tamaño no supere 788x95 pixeles. Si tenéis que recortarla
podéis modificarla con un editor de imágenes tipo El Gimp
ACTIVIDAD 7
Introduce una imagen en la cabecera de tu blog sin perder el nombre ni el
comentario. Adapta la imagen al espacio.

B. Columna lateral
En esta columna lateral podrás darte cuenta de la división en dos bloques:
1. En el superior aparecerá por defecto el Archivo del blog, que también
podrás editar a tu gusto (dentro de ciertas posibilidades).
2. En la inferior, verás el Gadget por defecto Seguidores.
Cuando quieras añadir un Gadget, solo tienes que pulsar en dicho enlace y se
abrirá, en una nueva ventana, un listado de posibilidades para incluir.

Añadir una imagen

ACTIVIDAD 8
Busca una imagen en Flickrcc y preocúpate de conocer el título y el autor y
apuntarlo, así como de la dirección de flickr del fotógrafo. Guarda la imagen en
tu ordenador. Entra en la solapa de Diseño y pulsa Añadir un Gadget en el
bloque superior. Elige Imagen e introdúcela desde tu equipo, incluyendo el
título y el autor, así su URL.

Crear una lista de enlaces a blogs o páginas web

Es muy interesante disponer de una lista de blogs y páginas web que te gusten
de modo que puedas acceder a ellos desde tu blog. Es tan fácil como añadir de
nuevo un Gadget y elegir del listado el gadget deseado.
ACTIVIDAD 4
Incluye en el bloque inferior de la columna lateral:
• Un gadget en el que incluirás los títulos de los blogs de tus compañeros
de clase con los enlaces correspondientes.
• Un gadget en el que incluirás títulos de blogs que te gusten.
• Un gadget con en laces a páginas web que te gusten.

C. Columna central
La columna central es el lugar donde aparecerán las diferentes entradas.
Podéis editarla para cambiar aspectos como:
 Número de entradas
 El formato de fecha y hora

11
internetylaweb2.0
Material elaborado para la optativa de CAM
 Añadir texto antes del autor
 Incluir comentarios.
 Reacciones

SESIÓN 6______________________________________________

CREACIÓN DE ENTRADAS
Puedes crear entradas pulsando en Nueva entrada o bien en
Personalizar>Creación de entradas>Crear. Dentro de la edición de las entradas
puedes trabajar en la solapa Redactar o bien en Edición de HTML.

Observa que tienes una barra en la parte superior que pone Título: es el
espacio en el que tendrás que escribir un título para tu artículo.
En Redactar tienes varias opciones para personalizar el formato de texto de
modo similar a un procesador de texto (aunque más limitado).
Solo necesitas un tema y ponerte a escribir. Para terminar tienes la opción de
Publicar Entrada, con la que harías público en la web tu artículo, o bien puedes
dar a Guardar como borrador, que no te lo publica, pero te lo guarda, por si
quisieras seguir trabajando en otro momento con él antes de publicarlo. Al
realizar esta acción se abre la solapa Editar entradas (entro de creación de
entradas), en la que puedes entrar para continuar, visualizarla o eliminarla.

12
 internetylaweb2.0
Material elaborado para la optativa de CAM

REALIZAR UN ENLACE
Crear un enlace es muy sencillo. En el menú superior de la edición de las
entradas, hay un icono de enlaces:

Pulsando sobre él saldrá una ventana en la que podrás escribir o pegar la

dirección del enlace. Y ya está

AÑADIR UN IMAGEN
Cuando estás escribiendo una entrada puedes incluir una imagen.
En el menú superior hay un icono de imagen.

Si colocas el cursor sobre él aparecerá a una ventana

nueva con la que podrás incluir una imagen. Es bastante
intuitiva:

13
internetylaweb2.0
Material elaborado para la optativa de CAM

Puedes tener problemas para incluir una imagen de la web. En este caso, otra
opción que no suele fallar es pasarte a Edición en HTML. Para esto debes
conocer cual es el código de la fotografía. Recuerda que las imágenes de la
web pertenecen a su autor y que debes mostrarte respetuoso con su trabajo. Al
estilo de Flickr, http://openphoto.net/ es otra página de imágenes que puedes
utilizar.
Para obtener el código:
Colócate sobre la imagen y pulsa con el botón izquierdo del ratón para
conseguirla a mayor tamaño. Pulsa de nuevo y podrás copiar el código que
aparece debajo de la imagen en la casilla Inline Image. Solo tendrás que
pegarla en la entrada que estás elaborando en Edición en HTML
ACTIVIDAD 1
• Entra en tu blog y crea una entrada. Dale un título relacionado con el
concurso de graffitis que se va a realizar en el centro en las Jornadas
Culturales y escribe la noticia.
• Entra en http://openphoto.net/ y busca en arte y graffiti una fotografía
para ilustrar el artículo. Insértala en el artículo. Incluye el nombre del
autor, el título de su obra y el lugar donde procede.
• Selecciona la imagen y realiza un enlace a la dirección URL donde se
encuentre la imagen.
• Selecciona el lugar de donde procede y enlázalo a su sitio web.

RECURSOS UTILIZADOS EN ESTE MATERIAL:

14
 internetylaweb2.0
Material elaborado para la optativa de CAM
Fuente de inspiración y gran parte de la información ha sido obtenida del
material elaborado por Lucía Álvarez para el grupo de trabajo Uso educativo de
los blogs que tienes disponible en la siguiente dirección de Internet:
http://blog.educastur.es/eduweb20/
También se han utilizado otros materiales, algunos aconsejados en la dirección
anterior:
http://www.eduteka.org/Web20Intro.php
http://es.wikipedia.org/

15