creaciÓn de un blog colaborativo con calendario, sistema de almacenamiento de archivos y formulario...

Autor: Javier Prieto Pariente (Septiembre 2010). Manual bajo licencia Creative Commons.

CREACIÓN DE UN BLOG COLABORATIVO CON CALENDARIO, SISTEMA DE

ALMACENAMIENTO DE ARCHIVOS Y FORMULARIO DE CONTACTO.

Autor: Javier Prieto Pariente

1.- Creación del Blog:

Accedemos a la página de inicio de Blogger e introducimos los datos de nuestra cuenta de

Google.

(Imagen 1)

Si aún no tenemos ningún blog asociado a este usuario de Google nos aparecerá la siguiente

pantalla, en ella debemos rellenar el campo “Mostar nombre”, dicho nombre será el utilizado

para firmar los artículos o entradas en el blog y se podrá cambiar posteriormente si así lo

deseamos.

Aceptamos las condiciones y damos a continuar:

(Imagen 2)


En la siguiente pantalla elegimos el nombre del blog y la ruta a través de la cual se accederá al

mismo (ambos valores también pueden ser modificados posteriormente).

(Imagen 3)

Por último escogemos una plantilla y damos a continuar, con ello ya tendremos nuestro blog

creado, y como nos dicen en la siguiente pantalla “ya podemos empezar a publicar”:

(Imagen 4)


2.- Crear el menú de navegación superior:

Necesitaremos para nuestro proyecto una serie de pestañas en la parte superior del blog que

llevarán a nuestros alumnos al calendario en el que les publicaremos las actividades que

queremos que realicen, y el sistema de almacenaje de archivos en el que publicaremos los

apuntes y hojas de actividades.

Para ello, vamos a la pestaña de diseño de nuestro blog y damos en “añadir un gadget” en la

parte superior:

(Imagen 5)

Elegimos la primera opción “Páginas” y nos llevará a la imagen 7.

(Imagen 6)


En esta nueva pantalla podemos cambiar el nombre “Página Principal” por “Inicio” y damos a

aceptar.

(Imagen 7)

3.- Crear páginas del menú:

Una vez que tengo el menú podemos ir creando las páginas que irán enlazadas en el mismo:

Calendario, archivos, contacto, me presento..

Para ello vamos a la pestaña “Crear entradas” y seleccionamos “Editar páginas”. Nos aparecerá

la opción de crear “Página Nueva”

(Imagen 8)


Vamos a ir creando dichas páginas aunque las dejemos vacías, posteriormente veremos cómo

editar su contenido.

(Imagen 9)

Una vez que pulsamos en “publicar Página” nos aparece la imagen 10, como no hemos

terminado aún de publicar todas nuestras páginas volvemos a pulsar en “Editar

Páginas””Páginas Nueva” y así sucesivamente.

(Imagen 10)


Finalmente, tendremos la siguiente pantalla:

(Imagen 11)

Y si pinchamos sobre “Ver blog” podremos observar cómo queda nuestro menú:

(Imagen 12)


4.- Introducción de nuestro calendario:

Accedemos a nuestra cuenta de “Google Calendar” desde la página de inicio de Google, tal

como se muestra en la siguiente imagen:

(Imagen 13)

Una vez que pongamos nuestro usuario y contraseña, si es la primera vez que utilizamos

Google Calendar nos aparecerá la siguiente imagen, cambiamos los datos que creamos

oportunos y le damos a “Continuar”:

(Imagen 14)


A través de la imagen 15 accedemos finalmente al calendario de Google asociado a nuestra

cuenta:

(Imagen 15)

(Imagen 16)

Lo primero que debemos hacer es configurar el calendario para que sea público de forma que

nuestros alumnos puedan ver su contenido, para ello vamos al apartado “Configuración”

señalado en la imagen 16, y en la pestaña “Calendarios” vamos al apartado “Compartido:

Editar Configuración”, tal como se muestra en la imagen número 17.


(Imagen 17)

Cuando pulsamos sobre “Compartido: Editar Configuración” llegamos a la imagen 18, en la que

podemos activar la casilla de verificación “Hacer público este calendario”, y damos a

“Guardar”.

(Imagen 18)


Para insertar nuestro calendario en el blog, debemos ir dentro del apartado “Mis calendarios”

pinchamos sobre nuestro calendario y se despliega una serie de opciones, la que nos interesa

es “Configuraciones del Calendario”, accedemos a este apartado:

(Imagen 19)

Entre los datos que se muestran en la ventana que se abre al pinchar sobre “Configuración del

Calendario”, se encuentra el código que debemos copiar y pegar en la página de nuestro blog

para insertar el calendario.

(Imagen 20)


Volvemos de nuevo a nuestra cuenta de Blogger, en el caso de que debamos ingresar de nuevo

una vez que pongamos nuestro usuario y contraseña nos aparecerá la pantalla que se

representa en la imagen 19, desde ella vamos a la pestaña de “Diseño”:

(Imagen 21)

Debemos encontrar la página “Calendario” creada anteriormente, para ello vamos a la sección

“Creación de Entradas””Editar Páginas” y finalmente pinchamos sobre la página

“Calendario” en “Editar”, tal como se muestra en la imagen 22.

(Imagen 22)


Lo que queremos pegar en esta página es un código HTML, por lo que lo primero que debemos

hacer es pinchar sobre “Edición HTML”:

(Imagen 23)

Una vez que estamos en la vista “Edición HTML” ya estamos en disposición de pegar el código

de nuestro calendario, lo único que debemos tener en cuenta es que para que entre dentro de

nuestro blog debemos modificar la anchura “width” hasta un valor aproximado de 500px. Una

vez realizado esto, ya podemos pulsar en “Publicar Página” y vamos a “Ver Página”

(Imagen 24)


Este sería el resultado:

(Imagen 25)

5.- Introducción del sistema de archivos con box.net:

Box.net es un servicio de almacenamiento de archivos en Internet, entre las ventajas que

ofrece están la facilidad para subir archivos a Internet y la posibilidad de configurar las

opciones de “compartir” los archivos, es decir, podremos decidir que personas acceden a cada

una de las carpetas y archivos que subamos a la red.

Lo primero que debemos hacer es ir a la página box.net y abrirnos una cuenta tal como se

muestra en la imagen 26.

http://www.box.net/


(Imagen 26)

Seleccionamos el Plan Personal “Free” e introducimos nuestros datos personales en la última

columna, por último le damos a continuar (Un consejo: Deshabilita la casilla “Receive Box.net's

Newsletter and Marketing” para evitar el correo Spam):

(Imagen 27)

Ya solo nos queda pulsar sobre “Create a Folder” y configuramos la carpeta para que sea

compartida ya que de lo contrario no la podremos incrustar en nuestro blog:

(Imagen 28)

(Imagen 29)


En la imagen 27, vemos que podemos elegir:

- El nombre de la carpeta.

- Definir el tipo de acceso, es decir, si pueden subir archivos o solo pueden verlos.

Cuando pulsemos por segunda vez en “Create Folder” nos informará de que nuestra carpeta

ha sido creada y que si queremos ir a ella “Take me there”.

Ya solo nos queda abrir carpetas para cada clase o nivel de alumnos a través del botón “New

Folder”, y una vez que hayamos creado todas las carpetas pinchamos sobre ”All Files”, en este

caso “documentos de clase” para ir al directorio raíz con lo que llegaríamos a la imagen 29:

(Imagen 30)

Tal como se muestra en la imagen 31, pinchamos con el botón derecho sobre la carpeta que

queremos compartir en nuestro blog y elegimos la opción ShareEmbed folder in your site.

Con ello obtendremos el código que debemos insertar en nuestro blog tal como hicimos antes

con el calendario.


(Imagen 31)

(Imagen 32)


Ya solo queda ir a la página correspondiente de nuestro blog y pegar el código.

(Imagen 33)

Una vez que demos en “Publicar entrada” y “Ver página”, podremos observar lo siguiente:

(Imagen 34)


Nuestros alumnos podrán acceder fácilmente a los documentos y podrán guardarlos en su

ordenador.

6.- Una carpeta para que solo puedan acceder nuestros alumnos:

Tal vez queramos que algunos documentos solo estén disponibles para nuestros alumnos, para

ello abrimos una nueva carpeta en el directorio “All files”, a la cual añadiremos a nuestros

alumnos como colaboradores (Imagen 34),y a continuación seleccionamos “Unshared”, lo cual

provocará que solo los que son colaboradores podrán acceder a la carpeta (Imagen 35)

(Imagen 35)

(Imagen 36)


(Imagen 37)

Esta carpeta no la podremos “incrustar” tal como hicimos con la carpeta pública, pero

podemos colocar en la página “Archivos” un enlace a https://www.box.net/login, para

que nuestros alumnos puedan acceder fácilmente a la carpeta.

Por supuesto, nuestros alumnos deberán haber abierto una cuenta en box.net con la

dirección de correo que nosotros hemos incluido en el campo “colaboradores”.

(Imagen 38)

7.- Introducir nuestro formulario de contacto:

Nos puede ser útil incluir en nuestro blog un formulario a través del cual nuestros alumnos

puedan dirigirse a nosotros con el fin de preguntarnos dudas, dicho formulario podría tener un

aspecto similar a lo que aparece en la siguiente imagen:

https://www.box.net/login


(Imagen 39)

Cuando un alumno escriba su mensaje y pulse al botón enviar recibiremos su contenido en

nuestra dirección de correo electrónico.

Para crear el formulario podemos ir a la página http://www.jotform.com/, este portal nos

ofrece la posibilidad de crear fácilmente formularios de manera gratuita, con la única

limitación poder recibir cien mensajes al mes a través de cada formulario.

Lo primero que hacemos es abrir una cuenta, para ello vamos a la parte inferior de la página

Web:

(Imagen 40)

http://www.jotform.com/


(Imagen 41)

Para empezar a crear nuestro formulario pinchamos sobre la pestaña “Mis

formularios””Nuevo formulario”, de esta forma accedemos a la imagen 42, donde elegimos

“Formularios de ejemplo””Contacte”:

(Imagen 42)

Con esto ya tenemos creado nuestro formulario, lo único que tendremos que hacer es cambiar

los campos para que muestre los títulos en castellano, simplemente pinchando en cada uno de

los textos que queremos modificar y los vamos cambiando.


(Imagen 43)

El único texto que es más difícil de cambiar es el de “Submit”, para ello pinchamos sobre la

rueda que se encuentra en la parte derecha y elegimos la opción “Show Properties”, tal como

se muestra en la siguiente imagen:

(Imagen 44)

Cambiamos “Submit” por “Enviar” y pulsamos en “Haga clic en Aceptar”:

(Imagen 45)


Tal vez nos interese que los alumnos utilicen el formulario para enviarnos trabajos, para ello

debemos introducir un nuevo campo en nuestro formulario a través el menú que tenemos en

la parte derecha, en concreto, mediante el apartado “Carga de archivos”, además

aprovechamos a limitar el tamaño del archivo que nos pueden enviar, es recomendable que

los alumnos nos puedan enviar al menos archivos de 5Mb, para lo cual ponemos un valor de

5000:

(Imagen 40)

Por último, podemos obligar al visitante a rellenar ciertos campos del formulario, es decir,

hacer que algunos campos tengan la propiedad “requerido”, para ello vamos seleccionando

cada uno de los campos que queremos hacer obligatorios y pinchamos sobre el símbolo

“requerido”.


(Imagen 46)

Ya tenemos creado el formulario, ahora vamos a la pestaña “Instalar y Compartir”Compartir

Formulario, nos pedirá la dirección de correo desde la que vamos a recibir los mensajes de las

personas que rellenen nuestro formulario:

(Imagen 47)

Accedemos a la siguiente ventana de la cual copiamos la ventana “Pegue este código en su

página web”:

(Imagen 48)


Accedemos a la página “Contacto” de nuestro blog y pegamos el código desde la pestaña

“Edición HTML”:

(Imagen 49)

Una vez que damos a “Publicar página””Ver página” obtenemos lo que aparece en la imagen

45:

(Imagen 50)


8.- Incluir a nuestros alumnos como redactores del blog:

Uno de los principales problemas que origina el tener un blog a un docente es que hay que

publicar contenidos en el mismo para que este sea realmente útil, esto implica bastante

trabajo. Una de las soluciones es compartir dicho trabajo con los alumnos, esto además tiene

importantes ventajas ya que por una parte siempre será más fácil que nuestros alumnos sigan

el blog si participan del mismo de forma activa, y por otra parte es una manera de implicar a

los alumnos en la construcción de su propio conocimiento, lo cual está bastante relacionado

con el trabajo de adquisición de competencias.

Para dar de alta a nuestros alumnos como autores debemos ir desde el panel de

administración de nuestro blog a la sección “Configuración””Permisos””Añadir Autores”:

(Imagen 51)

Se nos abre el campo de texto que aparece en la imagen 52 en el que escribimos los correos

electrónicos de los alumnos a los que queremos autorizar para escribir en el blog:

(Imagen 52)

creaciÓn de un blog colaborativo con calendario, sistema de almacenamiento de archivos y formulario...

Documents