03 opciones avanzadas (iii)

1

[Uso del Edublog en la Didáctica de la Religión bajo entorno LinEx] 16 de diciembre de 2010

OPCIONES AVANZADAS (III)

Hasta este momento tu Blog se presenta atractivo. Pero ahora quizás desees personalizarlo de modo avanzado: incluir otros formatos, agregarle tus propios videos o videos de YouTube, presentador de fotos, contador de ingresantes, etc. Todo ello se puede hacer agregando algunos códigos HTML de servicios que algunas páginas permiten de modo gratuito.

Algunos servicios gratuitos son:

1.- PANEL DE MENSAJES EN TU BLOG CON CBOXPágina Web: www.cbox.ws

2.- VÍDEOS DE LA PÁGINA DE YOUTUBE EN TU BLOGPágina Web: www.youtube.es

3.- SLIDE SHOW – PRESENTADOR DE FOTOS CON SLIDEPágina Web: www.slide.com

4.- SPLASHCAST – VIDEOS DE YOUTUBE POR CANALES Y OTROSPágina Web: www.splashcastmedia.com

6.- CONTADORES DE INGRESANTES A TU BLOGPágina Web: www.freelogs.com

7.- COMPARTIR Y MANEJAR SUS ARCHIVOS EN LÍNEA CON BOXPágina Web: www.box.net

8.- ESPACIOS DE TRABAJO COLABORATIVO – INTRANET Y OTROS CON MAYETICVILLAGE

Página Web: http://es.mayeticvillage.com9.- RELOJES PARA MEJORAR LA PRESENTACION DE TU BLOG CON CLOCKLINK

Página Web: www.clocklink.com/

Existen otros servicios gratuitos que podrás ir descubriendo con la experiencia. Empecemos esta parte de manera práctica, con las fichas de trabajo que a continuación colocamos, sólo con algunos servicios, el resto queda para que investigues.

AGREGÁNDOLE UN SONIDO DE FONDO A TU BLOG COMO ELEMENTO DE PÁGINA

1.- OBTENIENDO DIRECCIONES URL DE SONIDOS MIDI:

A.- Abre la siguiente página Web: www.culturageneral.netB.- Luego selecciona la opción Música Clásica.C.- Luego Sonata n° 14 “Claro de Luna”.

http://www.clocklink.com/

http://es.mayeticvillage.com/

http://www.box.net/

http://www.freelogs.com/

http://www.splashcastmedia.com/

http://www.slide.com/

http://www.youtube.es/

http://www.cbox.ws/

2


D.- Luego en la ventana que se presenta Clic Derecho sobre el Reproductor de la Música o sobre la palabra AQUÍ y seleccionar Propiedades.E.- En la ventana Propiedades selecciona y copia la Ubicación: URL del sonido MIDI. Recuerda Copiar: [Ctrl]+[C]. Veamos:

2.- AGREGANDO LOS CODIGOS NECESARIOS EN EL ELEMENTO HTML/Javascript DE TU BLOG:

A.- Ingresa a tu cuenta de Blogger. En el panel Escritorio selecciona el enlace Diseño.B.- Selecciona el enlace Añadir un elemento de página.C.- En la ventana que aparece ubica el elemento HTML/Javascript y seleccionalo.D.- En la ventana que aparece coloca un título y Digita las siguientes líneas de códigos:

<embed width="200" autostart="true" loop="true" src="Pega Aquí la Dirección URL del sonidoMIDI" height="40"></embed>

3


NOTA:En el código src pega la dirección del sonido Midi copiado

Quedaría de la siguiente manera:

<embed width="200" autostart="true" loop="true"src="http://www.culturageneral.net/musica/clasica/htm/../htm/midis/sonata_no_14_claro_de_luna.mid" height="40"></embed>

E.- Finalmente Seleccione el botón GUARDAR y Ver blog.F.- Puedes reubicar el elemento añadido o cambiar el sonido Midi por otroNOTAS PARA TOMAR EN CUENTA:

Parámetro UtilidadSRC Contiene la dirección URL del archivo de sonido a reproducir

WIDTH y HEIGHT

Aparece un pequeño reproductor, estos parámetros especifican su tamaño. Ancho y Alto respectivamente.

AUTOSTART="true"

Arranca automáticamente la reproducción. Para que no arranque automáticamente en lugar de “true” colocamos “0”

LOOP="true" Reproduce ininterrumpidamente el fichero hasta que salimos de la página.

Como se dio WIDTH="200" y HEIGTH="40" se mostrará un controlador de sonido. Según el sistema operativo será:

Aquí unas páginas web para obtener direcciones de melodías Midi: para obtener la URL de otras melodías revisa las siguientes páginas. Sólo haz Clic derecho sobre el Enlace y selecciona Propiedades, luego Selecciona y Copia la URL de la ventana que aparece:http://www.geocities.com/CollegePark/Dorm/9834/midi.htmlhttp://www.piano-midi.de/beeth_es.htmhttp://photofiltrecastellano.iespana.es/musicamidi.htm

AGREGAR UN PANEL DE MENSAJES DE CBOX A UNA ENTRADA DE TU BLOG Y COMO ELEMENTO DE TU PÁGINA

1.- OBTENIENDO LOS CODIGOS INSERTAR DEL PANEL EN LA PÁGINA DE CBOX:A.- Abre la siguiente página Web: www.cbox.wsB.- Sigue los siguientes pasos. Recuerda debes contar con una cuenta de mail.

4


C.- Cierra la ventana que aparece y tienes que ingresar a tu correo para verificar tu cuenta en Cbox, en este correo vendrá tu nombre de usuario y contraseña para acceder a tu cuenta.

D.- Aparecerá la siguiente pantalla, donde ingresarás con tu nombre de usuario y contraseña:

E.- aparecerá la siguiente ventana final:

5


2.- AGREGANDO LOS CODIGOS INSERTAR EN EL EDITOR DE HTML DE UNA ENTRADA

A.- Ingresa a la entrada donde vas a colocar el Panel de comentarios.B.- Selecciona la ficha Edición de HTML de la entrada y pega ([Ctrl]+[V]) los códigos en el lugar que desees.

<div id="cboxdiv" style="text-align: center; line-height: 0"><div><iframe frameborder="0" width="200" height="305"src="http://www5.cbox.ws/box/?boxid=326487&boxtag=4916&sec=main" marginheight="2"marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;"id="cboxmain"></iframe></div><div><iframe frameborder="0" width="200" height="75"src="http://www5.cbox.ws/box/?boxid=326487&boxtag=4916&sec=form" marginheight="2"marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1pxsolid;border-top:0px" id="cboxform"></iframe></div></div>

C.- Finalmente Seleccione el botón PUBLICAR ENTRADA y visualiza tu Blog en una ventana nueva.

NOTA:Para modificar el tamaño del Panel debemos saber que:

1.- Los parámetros:width=" " : Establece el Ancho del Panelheight=" " : Establece el Alto del Panel

2.- Modifica según tu necesidad. Cambiando el primer par es para visualizar el mensaje. El segundo par es para poner nombre y digitar el mensaje. Siempre deben coincidir los width.

6


3.- AGREGANDO LOS CODIGOS INSERTAR COMO ELEMENTO DE PÁGINA (HTML/Javascript)

A.- Selecciona la ficha Diseño.B.- Selecciona el enlace Añadir un elemento de página (Add a Page Element).C.- Da un clic en el botón AÑADIR AL BLOG del elemento HTML/Javascript.D.- Digita el título: PANEL DE MENSAJES.E.- Pega el código Insertar en el área CONTENIDO.F.- Modifica los valores de width y height si lo deseas.G.- Seleccione el botón GUARDAR.H.- Finalmente Seleccione el enlace Ver blog de elemento de página añadida.

AGREGAR UN VÍDEO DE YOUTUBE A UNA ENTRADA DE TU BLOG Y COMO ELEMENTO DE TU PÁGINA

1.- OBTENIENDO LOS CODIGOS INSERTAR DEL VÍDEO EN LA PÁGINA DE YOUTUBE:

A.- Abre la siguiente página Web: www.youtube.esB.- En la barra Buscar digita el tema o personaje: CuscoC.- Luego, da un clic al vídeo de la lista: Cusco – Promperu Tv Comercial. Puedes ver el vídeo para asegurarte que es el que buscas de lo contrario puedes cambiarlo en la lista de la derecha.

7


2.- AGREGANDO LOS CODIGOS INSERTAR EN EL EDITOR DE HTML DE UNA ENTRADA

A.- Crea una Nueva Entrada en tu Blog.B.- Trabajando en la ficha Redactar coloca de título CUSCO - PROMPERU TV COMERCIAL y en la entrada.C.- Selecciona la ficha Edición de HTML de la entrada y pega ([Ctrl]+[V]) el código Insertar de Youtube.

<object width="425" height="355"><param name="movie"value="http://www.youtube.com/v/D7pbF2P8CLM&hl=en"></param><param name="wmode"value="transparent"></param><embed src="http://www.youtube.com/v/D7pbF2P8CLM&hl=en"type="application/x-shockwave-flash" wmode="transparent" width="425"height="355"></embed></object>

D.- Finalmente Seleccione el botón PUBLICAR ENTRADA y visualiza tu Blog en una ventana nueva.

NOTA: Para modificar el tamaño de un vídeo debemos saber que:

1.- Los parámetros:width=" " : Establece el Ancho del Video

8


height=" " : Establece el Alto del video2.- Cambiando el segundo par es suficiente, pero es recomendable cambiar los dos pares a las mismas medidas. Valores aproximados para los casos:

Lugar donde ubicas el video ValoresEN UNA ENTRADA width="425" o Menos

height="355" o MenosPANEL DERECHO – COMO

ELEMENTOwidth="210" A 225height="150" A 165

3.- AGREGANDO LOS CODIGOS INSERTAR COMO ELEMENTO DE PÁGINA (HTML/Javascript)

A.- Selecciona la ficha Diseño.B.- Selecciona el enlace Añadir un elemento de página (Add a Page Element).C.- Da un clic en el botón AÑADIR AL BLOG del elemento HTML/Javascript.D.- Digita el título: CUZCO.E.- Pega el código Insertar en el área CONTENIDO.F.- Modifica los valores de width y height de la parte inferior (SEGUNDA PAREJA) por:width="210" height="150"G.- Seleccione el botón GUARDAR.H.- Finalmente Seleccione el enlace Ver blog de elemento de página añadida.

PONER UN SLIDE SHOW EN TU BLOG

1.- REGISTRANDONOS Y EMPEZANDO A CREAR NUESTRO SLIDE SHOW:

A.- Abre la siguiente página Web: www.slide.comB.- En la página de slide nos registramos siguiendo los siguientes pasos:

9


2.- AGREGANDO LAS FOTOS AL SLIDE SHOW.

A.- Debemos seguir los siguientes pasos y ser muy curiosos ya que hay muchos efectos:

B.- Luego podemos reordenar las imágenes arrastrándolos y ponerle una leyenda desarrollando:

10


C.- Copiamos el código HTML obtenido:

3.- AGREGANDO LOS CODIGOS HTML EN EL EDITOR DE HTML DE UNA ENTRADA:

A.- Crea una Nueva Entrada en tu Blog.B.- Ponle de título LAS MARAVILLAS DEL CUSCOC.- Selecciona la ficha Edición de HTML de la entrada y pega ([Ctrl]+[V]) el código HTML.<div><embed src="http://widget-00.slide.com/widgets/slideticker.swf" type="application/xshock-wave-flash" quality="high" scale="noscale" salign="l" wmode="transparent"flashvars="cy=h5&il=1&channel=1873497444995296512&site=widget-00.slide.com"style="width:426px;height:320px" name="flashticker" align="middle"/><divstyle="width:426px;text-align:left;"><ahref="http://www.slide.com/pivot?cy=h5&at=un&id=1873497444995296512&map=1"target="_blank"><img src="http://widget-00.slide.com/p1/1873497444995296512/h5_t016_v000_s0un_f00/images/xslide1.gif" border="0"ismap="ismap" /></a> <ahref="http://www.slide.com/pivot?cy=h5&at=un&id=1873497444995296512&map=2"target="_blank"><img src="http://widget-00.slide.com/p2/1873497444995296512/h5_t016_v000_s0un_f00/images/xslide2.gif" border="0"ismap="ismap" /></a></div></div>

D.- Puedes modificar los valores de width y height de la parte superior para cambiar el Ancho y Alto del Slide respectivamente. El Width de la parte inferior

11


debe llevar el mismo que el anterior.E.- Finalmente Seleccione el botón PUBLICAR ENTRADA y saldrá un error:

Este error lo arreglamos haciendo el siguiente cambio en los códigos:

Listo, Ahora si podemos publicar entrada.

4.- AGREGANDO EL SLIDE SHOW COMO ELEMENTO DE PÁGINA (HTML/Javascript)

A.- Selecciona la ficha Diseño.B.- Selecciona el enlace Añadir un elemento de página (Add a Page Element).C.- Da un clic en el botón AÑADIR AL BLOG del elemento HTML/Javascript.D.- Digita el título : LAS MARAVILLAS DEL CUSCO.E.- Pega ([Ctrl]+[V]) el código HTML en el área CONTENIDO. Aquí no saldrá errores.F.- Modifica los valores de width y height de la parte superior (PRIMERA PAREJA) por:“width:210px;height:150px"G.- El width inferior debe llevar el mismo valor que el del superior: 210px.H.- Seleccione el botón GUARDAR.I.- Finalmente Seleccione el enlace Ver blog de elemento de página añadida.

CONCLUSIONESY POTENCIALIDADES EDUCATIVAS

Hay muchas Páginas Web que te brindan el servicio gratuito para crear tu Blog. Elegimos el servicio de Blogger porque nuestra experiencia ha sido un trabajo en una interfaz cada día más fácil de utilizar y la posibilidad de

12


modificar las plantillas además de ser un servicio gratuito con una publicación y actualización en tiempo real.

Una vez que se domina el manejo de esta herramienta, podemos aplicarlo para elaborar una gama muy amplia de materiales educativos, experiencias que podemos asegurar y demostrar. Algunas experiencias de los Blogs aplicados en la educación son por ejemplo:

- LIBROS ELECTRÓNICOS

Esta experiencia ha sido pensada para elaborar textos tanto por parte de los docentes como también por los alumnos. Abre la posibilidad de poder producir material de consulta y en línea.

- ELABORAR UNA CLASE VIRTUAL

Utilizando la técnica “La caza de tesoros” podemos elaborar Blogs que permitan hacer un uso orientado y positivo de las bondades del Internet.

- CLASES VIRTUALES UTILIZANDO VIDEOS DE YOUTUBE

Si bien la mayoría de docentes tenemos una desconfianza de los vídeos que encontramos en YouTube, no podemos negar que es una página a la que acceden la gran mayoría de nuestros estudiantes. Por ello debemos explotarlo de modo orientando y seleccionando los materiales positivos de esa página.

La facilidad con que se insertan y manipulan los vídeos hace que podamos utilizar con mucho valor este servicio

- PERIODICOS ESCOLARES ELECTRÓNICOS

Herramienta que explotan los docentes de comunicación para que los alumnos puedan publicar noticias locales, regionales, nacionales e internacionales. Poniendo en práctica sus opiniones y creatividad sobre la realidad.

- MÓDULOS DE TRABAJO PARA CASOS DE ALUMNOS QUE FALTAN A LA ESCUELA O PARA ESTUDIOS A LARGA DISTANCIA

Herramienta que abre las opciones de facilitar los estudios para alumnos que se hayan ausentado de clases por motivos de salud u otros.

Para los cuales se les facilita los materiales cuando han faltado por causas justificadas, pero con evaluaciones presenciales obligatorias. Así no se retrasan del resto de compañeros de clase y culminan su año escolar satisfactoriamente.

- TRABAJAR EN REDES EDUCATIVAS

A través de esta herramienta todos los trabajos de las Instituciones Educativas pueden integrarse y actualizarse en tiempo real, de esa forma se están comunicando los avances en los diferentes programas que se desarrollan.

13


- PRODUCCION Y PUBLICACIÓN DE TRABAJOS

Podemos subir a la red los trabajos realizados por nuestros alumnos y realizar intercambio con otros centros.

BIBLIOGRAFÍA CONSULTADA

Páginas Web:

1.- https://www.blogger.com/2.- http://www.latarea.com.mx/articu/articu12/salcid12.htm3.- http://www.cidse.itcr.ac.cr/revistamate/index.html4.- http://www.aula21.net/5.- http://dewey.uab.es/pmarques/buenidea.htm#intro6.- http://www.eduteka.org/ComprensionLecturaInternet.php7.- http://dewey.uab.es/pmarques/habilweb.htm#riesgos#riesgos8.- http://contexto-educativo.com.ar/2003/4/nota-02.htm9.- http://www.eduteka.org/BlogsE

03 opciones avanzadas (iii)

Education