Sesión 22 de Febrero de 2010

43
INTRODUCCIÓN A LOS EDUBLOGS INTRODUCCIÓN A LOS EDUBLOGS IES Sevilla la Nueva 22 de Febrero de 2011 SEMINARIO SEMINARIO

Transcript of Sesión 22 de Febrero de 2010

Page 1: Sesión 22 de Febrero de 2010

INTRODUCCIÓN A LOS INTRODUCCIÓN A LOS EDUBLOGSEDUBLOGS

IES Sevilla la Nueva

22 de Febrero de 2011

SEMINARIOSEMINARIO

Page 2: Sesión 22 de Febrero de 2010

ÍNDICE DE LA SESIÓNÍNDICE DE LA SESIÓN

2. Personalizando el blog. Insertar un reloj.

1. Personalizando el blog. Insertar un calendario:

- Predefinido

- De eventos de google calendar

6. Personalizando el blog. Insertar un reproductor mp3

3. Personalizando el blog. Insertar un avatar parlante

4. Personalizando el blog. Insertar una licencia creative-commons

5. Personalizando el blog. Insertar un foro.

Page 3: Sesión 22 de Febrero de 2010

1.1. Personalizando el blog.Personalizando el blog.Insertar un calendarioInsertar un calendario

• Puede resultar muy útil insertar un calendario en nuestro

blog. Esto podemos hacerlo de dos maneras:

- Insertando un calendario predefinido que no

permite ninguna modificación.

- Insertando un calendario de Google Calendar

donde podemos incluir eventos.

• En ambos casos la solución es sencilla, hay que saber

donde buscar el código html que luego utilizaremos para

insertar en nuestro blog.

Page 4: Sesión 22 de Febrero de 2010

• Aunque blogger nos ofrece la posibilidad de publicar uno de sus

calendarios como gadget, vamos a recurrir a una página externa.

• Tecleamos www.free-blog-content.com en la barra de navegación.

• Accedemos al portal Free Blog Content. Esto ya nos dice que en

principio, el acceso a los códigos html es gratuito. No siempre será así.

• En la ventana central seleccionamos la categoría que nos interese, por

ejemplo “Nature Calendars”.

1.1. Personalizando el blog.Personalizando el blog.1.1 Insertar un calendario predefinido1.1 Insertar un calendario predefinido

Page 5: Sesión 22 de Febrero de 2010

• Al acceder, visualizamos distintos

tipos de calendarios, con diferentes

imágenes y tamaños.

• Además, debajo de cada calendario

tenemos acceso al código html

correspondiente. Ese será el código

que tendremos que copiar y pegar

en el gadget html correspondiente.

En la ventana de texto hacemos

click en el botón derecho y

pinchamos en “Seleccionar todo”, y

a continuación en “Copiar”

1.1. Personalizando el blog.Personalizando el blog.1.1 Insertar un calendario predefinido1.1 Insertar un calendario predefinido

Page 6: Sesión 22 de Febrero de 2010

• Accedemos a nuestro blog, añadimos desde diseño

un gadget html, y pegamos el código que hemos

copiado.

• Es conveniente no tocar el código html, pero si

queremos quitar la publicidad del sitio, no hay

más que ir a las últimas líneas y suprimir “Free

Blog Content”. Además, si queremos ajustar el

tamaño, deberemos cambiar los parámetros width

y height.

1.1. Personalizando el blog.Personalizando el blog.1.1 Insertar un calendario predefinido1.1 Insertar un calendario predefinido

Page 7: Sesión 22 de Febrero de 2010

• La segunda opción es insertar un calendario de

Google-Calendar. Esto presenta la ventaja de que

podemos incluir eventos y hacerlos públicos de

una manera muy sencilla.

• Para ello, primero necesitamos conocer como

funciona la aplicación de Google “Google

Calendar”

• Accedemos a www.google.es

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 8: Sesión 22 de Febrero de 2010

• Pinchamos en la zona superior en Mas/Calendar

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 9: Sesión 22 de Febrero de 2010

• En la ventana principal

podemos visualizar el

calendario actual.

• En la zona izquierda podemos

crear tantos calendarios como

queramos. Pinchamos dentro de

la ventana mis calendarios en la

pestaña “Añadir”.

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 10: Sesión 22 de Febrero de 2010

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 11: Sesión 22 de Febrero de 2010

• En la ventana principal de creación de nuevo

calendario completamos los campos que se nos

piden, como nombre, descripción, etc.

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

• Es importante que indiquemos correctamente la

franja horaria y que hagamos público el calendario

para que todos los usuarios del blog puedan

visualizar la información correctamente.

• Por último pinchamos en

Crear calendario

Page 12: Sesión 22 de Febrero de 2010

• Antes de crear definitivamente el calendario, nos

aparecerá un mensaje advirtiéndonos de las

consecuencias de tener un calendario público, que

no son más que cualquier usuario podrá visualizar

los eventos que en él creemos. Pulsamos en “Si”.

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 13: Sesión 22 de Febrero de 2010

• En la zona izquierda, en el apartado de Mis

calendarios, aparecerá el nombre del nuevo

calendario que hemos creado.

• Podemos tener más de un calendario. Para

activarlo solamente debemos pulsar sobre él y

esperar a que se resalte con un color.

• En la ventana principal de la derecha observamos

el calendario que tengamos seleccionado, en la

vista que tengamos activa: Día, semana, mes, etc.

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 14: Sesión 22 de Febrero de 2010

• Para insertar un evento en el calendario, no

tenemos más que hacer click en el día y la hora a

la que lo queramos crear.

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 15: Sesión 22 de Febrero de 2010

• Siempre podemos modificar un evento ya creado, sin

más que pinchar sobre él.

• Una vez que hayamos hecho las modificaciones, no

debemos olvidar de guardar los cambios.

• Por otro lado, si pinchamos en suprimir, eliminaremos el

evento seleccionado

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 16: Sesión 22 de Febrero de 2010

• Para poder compartir el calendario y

sus eventos en nuestro blog,

necesitamos tener acceso al código

html del mismo.

• Con el calendario resaltado,

pinchamos en Configuración

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 17: Sesión 22 de Febrero de 2010

• Pinchamos en el nombre del calendario que

queremos compartir.

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 18: Sesión 22 de Febrero de 2010

• Buscamos la opción de incrustar el calendario y

pinchamos en personalizar el color, el tamaño y otras

opciones, para cambiar esto, o bien copiamos

directamente el código que aparece justo debajo.

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 19: Sesión 22 de Febrero de 2010

• Aunque podemos incrustar el calendario en la barra lateral del

blog, lo cierto es que no se visualizarían correctamente los

eventos. Por esta razón se recomienda incluirlo como página

estática, tal y como explicamos en la segunda sesión

presencial.

1.1. Personalizando el blog.Personalizando el blog.1.2 Insertar un calendario de Google-Calendar1.2 Insertar un calendario de Google-Calendar

Page 20: Sesión 22 de Febrero de 2010

2.2. Personalizando el blog.Personalizando el blog.Insertar un relojInsertar un reloj

• Vamos a teclear en nuestra barra de navegación la

siguiente dirección:

www.widgetsi.com/relojes-web-gratis.php

• Accedemos a una página donde existen diferentes

modelos de relojes. Buscamos uno que se ajuste a

nuestro diseño de plantilla y pinchamos en él.

• Al pinchar sobre el nombre del reloj, accedemos al

código html que debemos copiar y pegar en un gadget

html que creemos en nuestro blog.

Page 21: Sesión 22 de Febrero de 2010

2.2. Personalizando el blog.Personalizando el blog.Insertar un relojInsertar un reloj

• Si queremos ajustar el tamaño, no tendremos más que

modificar los valores de width y height del código html

pegado.

• Si queremos quitar el vínculo que por defecto viene

creado en el reloj, no tenemos más que acceder al código

html y borrar todo el código contenido entre las etiquetas

<a y /a>.

Page 22: Sesión 22 de Febrero de 2010

3.3. Personalizando el blog.Personalizando el blog.Insertar un avatar parlanteInsertar un avatar parlante

• Si queremos publicar un avatar parlante en nuestro blog, lo

primero que debemos hacer es registrarnos en la página

www.voki.com

• Para ello pulsamos en la zona superior derecha en el botón

register

Page 23: Sesión 22 de Febrero de 2010

• Completamos los campos que nos piden y aceptamos los términos y condiciones.

3.3. Personalizando el blog.Personalizando el blog.Insertar un avatar parlanteInsertar un avatar parlante

Page 24: Sesión 22 de Febrero de 2010

• Una vez creada la cuenta, para crear el avatar no tenemos más que pinchar en “Create a New Voki”

3.3. Personalizando el blog.Personalizando el blog.Insertar un avatar parlanteInsertar un avatar parlante

Page 25: Sesión 22 de Febrero de 2010

3.3. Personalizando el blog.Personalizando el blog.Insertar un avatar parlanteInsertar un avatar parlante

• 1. Pantalla de previsualización. Podemos comprobar como queda el avatar e incluso escuchar el mensaje pulsando en play.

• 2. Menú para cambiar colores y modificar la forma del avatar.

• 3. Menú para cambiar el avatar así como su apariencia.

• 4. Menú para incluir el mensaje del avatar. Lo mejor es incluir un mensaje de texto y escribirlo. Debemos pulsar en el icono de la tecla.

• 5. Menú para cambiar el fondo del avatar.

• 6. Menú para cambiar el tema, o lo que es lo mismo, el marco que contiene el avatar.

Page 26: Sesión 22 de Febrero de 2010

3.3. Personalizando el blog.Personalizando el blog.Insertar un avatar parlanteInsertar un avatar parlante

• Una vez que tengamos el avatar preparado debemos pinchar en publish (publicar)

• En la ventana emergente deberemos seleccionar el nombre del avatar.

Page 27: Sesión 22 de Febrero de 2010

3.3. Personalizando el blog.Personalizando el blog.Insertar un avatar parlanteInsertar un avatar parlante

• Por último, se nos proporciona el código html que necesitamos para nuestro blog:1. Seleccionamos el tamaño adecuado (si no se ajusta bien luego podremos cambiar las etiquetas width y height en el código.2. Seleccionamos el icono de blogger para informar de que es ahí donde vamos a utilizar el avatar.3. Pinchamos en el botón copy para copiar el código que luego pegaremos en un gadget html de nuestro blog.

Page 28: Sesión 22 de Febrero de 2010

4.4. Personalizando el blog.Personalizando el blog.Insertar una licencia creative-Insertar una licencia creative-commonscommons

• De cara a que en cierto modo aseguremos que nuestro trabajo es personal y no es aprovechado por terceros, es conveniente que identifiquemos nuestro blog con una licencia comercial.

• Para ello vamos a recurrir al portal web más utilizado para este fin: http://es.creativecommons.org/

• Ahí pinchamos en la pestaña Licencias para conocer los tipos de licencias que existen.

• Podéis elegir la que más os guste, aunque la más utilizada en los blogs es la de:Reconocimiento - NoComercial - SinObraDerivada (by-nc-nd):

Page 29: Sesión 22 de Febrero de 2010

4.4. Personalizando el blog.Personalizando el blog.Insertar una licencia creative-Insertar una licencia creative-commonscommons

• Cuando tengamos claro que licencia vamos a insertar en nuestro blog, pinchamos en “Escoja una licencia”, en la zona superior derecha.

Page 30: Sesión 22 de Febrero de 2010

4.4. Personalizando el blog.Personalizando el blog.Insertar una licencia creative-Insertar una licencia creative-commonscommons

• En función de las respuestas que demos, estaremos solicitando una licencia u otra.

• En título de la obra podemos poner el nombre del blog y en Atribuir la obra, podemos poner nuestro nombre.

• Por último pinchamos en el botón “Escoja una licencia”.

Page 31: Sesión 22 de Febrero de 2010

4.4. Personalizando el blog.Personalizando el blog.Insertar una licencia creative-Insertar una licencia creative-commonscommons

• Seleccionamos el botón que más nos guste, (podemos previsualizar el aspecto final) y copiamos el código html que necesitamos insertar como gadget en nuestro blog.

Page 32: Sesión 22 de Febrero de 2010

5.5. Personalizando el blog.Personalizando el blog.Insertar un foro en el blogInsertar un foro en el blog

• Si queremos insertar un foro en nuestro blog para que los alumnos puedan intervenir sin necesidad de hacerlo mediante comentarios a una entrada, podemos recurrir a un foro muy sencillo, en la página http://www.cbox.ws/

• Aunque existen modalidades de pago, la versión más sencilla es la más gratuita. Para poder obtenerla no tenemos más que pinchar en

Page 33: Sesión 22 de Febrero de 2010

5.5. Personalizando el blog.Personalizando el blog.Insertar un foro en el blogInsertar un foro en el blog

• Completamos los campos que aparecen indicando el nombre que queremos darle al foro, nuestro mail, contraseña, la dirección del blog, el idioma y el estilo del foro.

• Además, deberemos aceptar los términos y condiciones antes de pulsar Create my Cbox

• Al crear el cbox(foro), obtendremos el código html que tendremos que publicar en el gadget de html correspondiente.

Page 34: Sesión 22 de Febrero de 2010

6.6. Personalizando el blog.Personalizando el blog.Insertar un reproductor mp3Insertar un reproductor mp3

• Vamos a insertar un reproductor mp3 en nuestro blog.

• Para ello vamos a recurrir a un servidor remoto que nos permite subir archivos mp3 y además nos genera

un reproductor que podemos insertar en nuestro blog.

• Accedemos a la siguiente dirección:

www.goear.com

• Nos registramos pinchando en el

botón “Regístrame”,

completando los campos que se

nos solicitan

Page 35: Sesión 22 de Febrero de 2010

6.6. Personalizando el blog.Personalizando el blog.Insertar un reproductor mp3Insertar un reproductor mp3

• Una vez que accedemos con nuestro usuario y

contraseña, para subir nuestros archivos de música

no tenemos más que pinchar en el botón

Page 36: Sesión 22 de Febrero de 2010

6.6. Personalizando el blog.Personalizando el blog.Insertar un reproductor mp3Insertar un reproductor mp3

• Completamos todos los

campos que nos

aparecen: título de la

canción, artista, etc.

• Seleccionamos el

archivo mp3 que

queremos subir desde

nuestro equipo

• Aceptamos los

términos y condiciones

y pinchamos en Subir

música

Page 37: Sesión 22 de Febrero de 2010

6.6. Personalizando el blog.Personalizando el blog.Insertar un reproductor mp3Insertar un reproductor mp3

• Con la subida completada creamos una “Playlist”

(lista de reproducción), que es lo que me va a

permitir generar mi reproductor mp3. Pinchamos en

“Mis Canciones"

• Pinchamos sobre el título de la canción que hemos

subido.

Page 38: Sesión 22 de Febrero de 2010

6.6. Personalizando el blog.Personalizando el blog.Insertar un reproductor mp3Insertar un reproductor mp3

• Ya podemos observar como va a quedar nuestro reproductor

• Como lo más probable es que queramos tener más de una

canción, es necesario que creemos una lista de

reproducción, para que podamos incluir varias canciones en

ésta.

• Pinchamos en

“Añadir a Playlist”

Page 39: Sesión 22 de Febrero de 2010

6.6. Personalizando el blog.Personalizando el blog.Insertar un reproductor mp3Insertar un reproductor mp3

• Seleccionamos “En nuevo Playlist” para crear la lista.

(Cuando ya la tengamos creada, seleccionaremos la opción

“En Playlist existente”).

• Introducimos el nombre de la Playlist y pinchamos en el

botón Crear.

Page 40: Sesión 22 de Febrero de 2010

6.6. Personalizando el blog.Personalizando el blog.Insertar un reproductor mp3Insertar un reproductor mp3

• Una vez que tenemos la lista ya creada, para obtener el

código html del reproductor, no tenemos más que, desde la

página principal, pinchar en Mis Playlist, en la zona

inferior de la página

• Pulsamos en el nombre de la Playlist que hayamos creado

Page 41: Sesión 22 de Febrero de 2010

6.6. Personalizando el blog.Personalizando el blog.Insertar un reproductor mp3Insertar un reproductor mp3

• En la ventana

del Playlist, en

la zona inferior

tenemos el

código html que

necesitamos

para generar el

reproductor mp3

en nuestro blog.

Page 42: Sesión 22 de Febrero de 2010

6.6. Personalizando el blog.Personalizando el blog.Insertar un reproductor mp3Insertar un reproductor mp3

• Por último, solo queda generar un gadget de html en

nuestro blog, incluyendo el código al que hemos accedido

antes.

• Es importante que tengamos cuidado con el tamaño físico

del reproductor. Si es necesario deberemos modificar las

etiquetas de width y height en el código.

Page 43: Sesión 22 de Febrero de 2010

ACTIVIDADESACTIVIDADES

• Inserta en tu blog un calendario de google calendar en una página estática y crea algún evento en el mismo.

• Inserta un calendario predefinido en la página principal del blog.

• Inserta un reloj en la página principal del blog.• Inserta un foro en la página principal del blog.• Inserta un reproductor mp3 en la página principal

del blog, o en una entrada del mismo.