Mdulo II

Taller de Blog

Contenido
Creacin de un blog en Blogger. Configuracin. Creacin de entradas bsicas. Editar pginas. Diseo. Adiccin de elementos de pgina bsicos (Edicin del perfil, Lista de etiquetas y de archivos, Cabecera, Lista de pginas). Cambio de plantilla. Creacin de un blog utilizando WordPress. Semejanzas y diferencias entre Blogger y WordPress.

UTN FRBA DIGITAL JUNIOR

1

Taller de Blog

UTN FRBA- Digital Junior

Pasos para la creacin de un Blog en Blogger.

Lo primero que debemos hacer, en caso de no tenerla con anterioridad, es abrir una cuenta de correo en Google. Para ello, desde la pgina principal de Google accedemos a Gmail pulsando la opcin Acceder, y en la ventana que se abre pulsamos en Crear una cuenta ahora. En la ventana que se abre completamos los datos requeridos.

Una vez creada la cuenta accedemos a la pgina de Blogger a travs de su URL: http://www.blogger.com, y pulsamos sobre la opcin: Crear tu Blog Ahora. Al presionar este link el sistema nos trasladar, a una siguiente pgina donde se deber ingresar el mail anteriormente creado, ms el nombre de usuario que nos gustara tener y la misma contrasea

Taller de Blog
del mail para verificar.

UTN FRBA- Digital Junior

Al presionar el botn Continuar se visualizar la siguiente ventana en la cual deberemos introducir un nombre para nuestro blog y su direccin, tal como muestra la imagen inferior. Una vez introducida su direccin comprobamos la disponibilidad de la misma, en caso de que dicha direccin ya se encuentre asignada, deberemos cambiarla y volver a comprobar.

Taller de Blog

UTN FRBA- Digital Junior

Seguidamente seleccionamos una plantilla para nuestro blog, luego de terminado el proceso de creacin, se la podr cambiar por otra.

Por ltimo presionamos el botn Empezar a publicar.

Se presentar la siguiente ventana desde la cual personalizaremos su configuracin, pulsando el botn Configuracin.

Taller de Blog

UTN FRBA- Digital Junior

Configuracin
Desde la pestaa Bsico ser posible configurar las siguientes opciones: Ttulo del blog, Descripcin, Aadir el blog a la lista de Blogger, Permitir que los motores de bsqueda encuentren nuestro blog, Seleccionar el editor de entradas, entre otras.

Taller de Blog

UTN FRBA- Digital Junior

Desde Formato: Configurar el nmero mximo de entradas en la pgina principal, Formato de fecha, Zona horaria (escoger Buenos Aires), Idioma, entre otros.

Desde Comentario: Mostrar u ocultar los comentarios, Personas que pueden realizar comentarios (Puedes seleccionar cualquiera), Ubicacin, Mostrar enlaces de retroceso (Permite realizar el seguimiento de otra web que tienen enlaces a tus entradas), Moderar comentarios (Permite revisar los comentarios recibidos en las entradas antes de ser publicados Opcin recomendada -).

Desde Archivo: Frecuencia de archivo (es conveniente dejar la opcin que viene por defecto, mensualmente), Habilitar pginas de entrada (Si optamos por S cada entrada tendr su propia pgina, adems de aparecer en la pgina inicial).

Desde Permisos: Puedes aadir autores para editar entradas en tu blog. (Esta opcin resulta til si se desea crear un blog para trabajo colaborativo en el aula). Para ello, abrimos el panel de blogger, y a continuacin accedemos a la pestaa Configuracin y la subpestaa Permisos. A continuacin pulsamos Aadir autores, y enviamos el mail de la persona a la cual queremos invitar, para que pueda aceptar la invitacin el nico requisito es que la otra persona tenga una cuenta de google. La persona que recibe la invitacin recibir un mail. Una vez se identifique podr comenzar a publicar entradas (en la que figurar como autor de la misma), pero sin poder editar la plantilla o la configuracin del blog. En caso que deseemos conceder al nuevo usuario privilegios de administrador, tendremos que pulsar sobre el botn Otorgar privilegios de administrador que aparecer una vez ya se haya registrado.

Taller de Blog

UTN FRBA- Digital Junior

Creacin de entradas
La mayor parte del contenido de nuestro Blog se publicar en las entradas. multimedia stas pueden contener: texto, imgenes, por presentaciones Youtube, archivos

(Videotutoriales en

enlazados

desde,

ejemplo

presentaciones

PowerPoint

enlazadas

desde

SlideShare,

enlazados desde Scribd o GoogleDoc, simuladores, enlaces a otros sitios Web relacionados, etc). Si no hemos accedido an a nuestro blog, tecleamos su direccin en la barra de direcciones, con lo cual se presentar la siguiente ventana:

Taller de Blog

UTN FRBA- Digital Junior

Al pulsar la opcin Acceder, se nos presentar una nueva ventana en la cual deberemos introducir la direccin de correo con la que creamos el blog y la contrasea, por ltimo hacemos clic en Acceder.

Dentro de la pestaa Creacin de entrada encontramos las siguientes opciones: Nueva Entrada (para agregar una entrada), Editar Entradas (para modificar entradas ya creadas), Editar pginas (Para agregar pginas a nuestro blog, como mximo se pueden agregar 10 pginas) y Moderacin de Comentarios (para leer los comentarios recibidos antes de publicarlos). Al pulsar el botn Nueva Entrada, se presentar la siguiente interfaz:

Ttulo de la entrada

Introducir texto Edicin HTML Contenido

Opciones de entrada

Etiquetas

Taller de Blog

UTN FRBA- Digital Junior

Barra de herramientas
Negrita - Cursiva Fuente Color fondo de Hipervnculo Alineacin Quitar formato

Tamao Tachado

Color de Fuente

Imagen Numeracin Vietas

Cmo agregar texto, imgenes y enlaces

En la primer entrada que se crear como ejemplo se agregar texto, imgenes y un enlace. Comenzamos escribiendo el ttulo, Wave, la nueva apuesta de Google, luego pulsamos sobre la pestaa Redactar y escribimos o copiamos el texto del artculo en la entrada: La empresa Google, lanzar la prxima semana su nuevo servicio Wave ("ola" en ingls), el cual pretende revolucionar la forma en que interactan los cibernautas. La aplicacin comenzar a ser de uso pblico el 30 de septiembre, cuando la compaa enve 100.000 invitaciones a usuarios que se hayan inscrito en la pgina de la plataforma. Se trata del siguiente paso lgico en la constante expansin multimedia de la empresa que parti centrada en las bsquedas en la web y que ahora planea habilitar una herramienta colaborativa en tiempo real, la cual permite a los usuarios trabajar en un mismo contenido llamado wave. Utilizando la Barra, anteriormente descrita, aplicamos el formato deseado a dicho texto, en el ejemplo se utiliz: Fuente verdana, Tamao pequea, Alineacin justificada.

Taller de Blog

UTN FRBA- Digital Junior

Luego para agregar la imagen, posicionamos el cursor en la primera lnea de la entrada y pulsamos el botn Imagen:

Si la imagen se encuentra en nuestro disco, la buscamos con el botn Examinar, una vez seleccionada comenzar el proceso de carga de la misma, al terminar podremos escoger su alineacin y tamao. Seguidamente agregaremos un enlace al sitio Web que trata el tema, para ello escribimos un texto que se utilizar como enlace, lo seleccionamos y hacemos clic en el botn Enlace, donde ingresaremos la URL direccin- del sitio.

Los contenidos de las entradas se los puede clasificar, segn el tema que aborden, por medio de etiquetas, en este caso, en el cuadro Etiquetas asignaremos la etiqueta Web 2.0 a la entrada creada, escribiendo dicho texto en el recuadro. Ms adelante al crear una nueva entrada, a la derecha de dicho recuadro se visualizar Mostrar todas, opcin que nos permitir, al hacer clic en ella, escoger alguna etiqueta ya creada o bien de no existir escribir una nueva.

10

Taller de Blog
Por ltimo configuraremos Permitir en

UTN FRBA- Digital Junior

Opciones de entradas -

Comentarios de lectores. Los comentarios recibidos slo se publicarn una vez ledos ya que se configur Moderar comentarios. Al presionar el botn Publicar entrada, y Ver Blog obtendremos el siguiente resultado:

Como se mencion anteriormente las entradas o post son la unidad de informacin/narracin en un blog. Los enlaces y referencias aaden informacin adicional sin alargar el contenido visual, razn por la cual resulta muy til agregar el enlace Ms informacin. Para ello contamos con el siguiente botn en la barra que figura al crear las mismas

El procedimiento es muy sencillo: Escribimos el texto que se visualizar en la entrada, luego pulsamos el botn Insertar salto de lnea y por ltimo escribimos el texto que aparecer al hacer clic en Ms informacin.

11

Taller de Blog

UTN FRBA- Digital Junior

El resultado ser el siguiente:

Editar pginas estticas Blogger ha incluido la opcin de crear pginas estticas en los blogs. Las pginas, como se denominan a diferencia de las entradas o posts, son documentos que no se incluyen en el flujo cronolgico inverso de las entradas que se publican en el blog, y contienen informacin esttica, es decir, permanente, sobre aspectos diversos del blog o de quienes lo han creado. En sentido estricto, este tipo de contenido es ajeno al contenido dinmico del blog, y por eso supongo que Blogger ha tardado en implementarlo, pero siempre viene bien disponer de este tipo de

documentos en el blog. Las mismas pueden resultar tiles para la bsqueda de informacin concreta de los contenidos, es decir, una organizacin estructurada de los

12

Taller de Blog

UTN FRBA- Digital Junior

contenidos del blog, que facilite la bsqueda, por ejemplo, como ndice de contenidos, documento en el que se puede ordenar las entradas no por orden cronolgico, sino pensando en la estructura general del contenido. Otro ejemplo podra ser con Enlaces interesantes sobre el contenido del blog, pues el lateral del blog, donde se suelen publicar los enlaces, puede quedarse pequeo si los enlaces son muchos y variados. Para ello en la pestaa Creacin de entradas pulsamos sobre Editar pginas.

En la ventana que se abre pulsamos el botn Pgina nueva (Slo es posible agregar hasta diez pginas).

13

Taller de Blog

UTN FRBA- Digital Junior

Le colocamos un ttulo a nuestra nueva pgina con lo cual ya podemos comenzar a editarla, por ltimo pulsamos el botn Publicar pgina.

Cuando la publicamos se

nos preguntar si deseamos aadir el

Gatget lista de pginas, al hacer clic sobre dicho botn se abrir la siguiente ventana, donde podremos modificar el orden de las pginas arrastrndolas con el mouse:

14

Taller de Blog

UTN FRBA- Digital Junior

Luego desde la vista diseo ser posible ubicar dicho Gatget donde queramos.

En este caso se escogi debajo de la cabecera. Al agregar otras pginas este ser el aspecto de nuestro blog.

Diseo
Para modificar el diseo de nuestro blog, si no hemos ingresado an, escribimos su URL en la barra de direcciones y hacemos clic en el botn Acceder. Ingresamos nuestro nombre de usuario y contrasea, luego pulsamos el botn Acceder.

15

Taller de Blog

UTN FRBA- Digital Junior

En la ventana que se abre escogemos la pestaa Diseo con lo cual se visualizar la siguiente pantalla:

Elementos de pgina: Dicha opcin se utiliza para aadir, organizar, configurar o eliminar un elemento de pgina, tambin llamados gadget.

Asimismo es posible editar la configuracin del cuadro Entradas y el de la Barra de Navegacin. De manera predeterminada cuando creamos nuestro blog aparecen los siguientes gatget: Barra de Navegacin, Cabecera, Seguidores, Archivos del Blog, Datos personales Los mismos pueden ser arrastrados con el mouse a una nueva posicin, enmarcada con una lnea de puntos, de acuerdo a nuestras necesidades.

Para modificar un elemento de pgina se debe pulsar en Editar.

16

Taller de Blog

UTN FRBA- Digital Junior

Comenzaremos editando el perfil del autor del blog, para lo cual pulsamos Editar en el gatget Datos personales.

Una vez completada la informacin requerida, se debe pulsar el botn Guardar. De no querer guardar los cambios hacemos clic en Cancelar. Ubicaremos dicho gatget en la parte superior de la columna derecha haciendo clic con el botn del mouse sobre l y arrastrndolo hasta dicha posicin. Modificaremos el elemento de pgina Archivos del blog, para ello hacemos clic en el botn Editar de dicho elemento:

17

Taller de Blog

UTN FRBA- Digital Junior

En la ventana que se nos presenta ser posible modificar su Ttulo; el Estilo (Jerarqua, Lista, Men desplegable), desde la Vista previa podremos visualizar los resultados obtenido de acuerdo a las distintas opciones; la Frecuencia de archivo, es conveniente escoger mensual ya que de ese modo las entradas estarn agrupadas por mes de publicacin; el Formato de fecha. Para terminar debemos hacer clic en el botn Guardar. Configuramos, ahora, el elemento de pgina Cabecera en el cual es posible agregar una descripcin del blog e insertar una imagen (Desde nuestro disco o ubicada en Internet). Tambin es posible decidir si la misma se

ubicar detrs del ttulo y la descripcin, o si reemplazar a dichos textos.

El resultado en nuestro Blog se visualizar de la siguiente manera:

18

Taller de Blog

UTN FRBA- Digital Junior

Fuentes y Colores: Desde dicha pestaa se podr configurar todo lo relativo al tipo de fuente utilizada en cada elemento del blog, as com tambin el color de la misma. Si en el desplegable de la izquierda se selecciona alguna opcin relativa a Color se visualizar los cuadritos presentes en la siguiente imagen donde con solo hacer clic en alguno de ellos el color ser aplicado.

En la siguiente imagen se cambi el color de fondo de la pgina:

19

Taller de Blog

UTN FRBA- Digital Junior

Al escoger algunas de las opciones Fuente, se visualizar las distintos tipos de fuentes que disponemos, as como tambin su tamao y estilo (Cursiva o negrita).

En el ejemplo se modific la fuente del ttulo y descripcin del blog

20

Taller de Blog

UTN FRBA- Digital Junior

De igual modo se podr modificar el color y la fuente de los siguientes elementos: Color del texto, del enlace, del ttulo, de la descripcin, del ttulo de la entrada, del borde de la misma, color del ttulo y texto de la barra lateral, de los enlaces visitados, Fuente del ttulo del blog y barra lateral, del texto, del pie de la entrada. Cambio de plantilla: Desde la opcin Seleccionar nueva plantilla se podr cambiar la planilla por otra predeterminada y desde Edicin HTML se podr cargar una plantilla nueva descargada, por ejemplo, de la siguiente URL: http://www.templates-blogger.com Para ello, primero se la debe descargar a nuestro disco, pulsando el botn Download y luego descomprimir.

Para

descomprimir

el

archivo

debemos

seleccionarlo y pulsando el botn derecho del mouse escogemos Extraer aqu (Extract Here).

21

Taller de Blog

UTN FRBA- Digital Junior

Desde la pestaa Edicin HTML pulsamos el botn Examinar y buscamos el archivo descomprimido, una vez localizado pulsamos el botn Subir.

Se visualizar un mensaje de advertencia en donde se nos informa acerca de la posibilidad de mantener algunos elementos que la nueva plantilla no contiene, a lo cual responderemos Mantener Widgets.

22

Taller de Blog
El resultado obtenido ser el siguiente:

UTN FRBA- Digital Junior

23

Taller de Blog

UTN FRBA- Digital Junior

Creacin de un Blog en WordPress.

Para crear un blog en WordPress deber dirigirse a la siguiente URL: http://es.wordpress.com

Pulsando en el botn Registrarse ahora se presentar la siguiente pantalla, en la cual deberemos completar los datos requeridos, pulsamos la casilla Aceptar, y luego Siguiente:

Una vez completados los datos se visualizar la siguiente pantalla que nos informa la direccin de nuestro blog, as como tambin aceptar que

24

Taller de Blog

UTN FRBA- Digital Junior

el mismo figure en los motores de bsqueda de Google o Technorati, y pulsamos Registrarse.

Para completar dicho proceso debemos ingresar a nuestro correo para activar la cuenta, pulsando sobre

http://signup.wordpress.com/activate/efbbaca47613e28b, con lo cual se visualizar la siguiente ventana de confirmacin:

25

Taller de Blog

UTN FRBA- Digital Junior

Si pulsamos en View your site, podremos visualizar el blog recientemente creado.

Para comenzar a crear entradas y modificar la configuracin debemos pulsar la opcin Login. Al ingresar nos encontramos con el escritorio, desde donde editaremos las entradas, cambiaremos la apariencia del blog, etc. URL del blog de prueba http://informaticamente10.wordPress.com

26

Taller de Blog

UTN FRBA- Digital Junior

En la Barra lateral izquierda disponemos de las opciones necesarias para: Acceder al Escritorio, Entradas, Multimedia, Enlaces, Pginas,

Comentarios, Encuestas, Apariencia, etc. Para cambiar la plantilla del blog debemos pulsar la opcin Temas incluido en la Categora Apariencia. En Browse Themes pulsar sobre A Z para visualizar las plantillas disponibles

Para visualizar el resultado antes de escoger el definitivo debemos pulsar sobre Vista Previa.

27

Taller de Blog

UTN FRBA- Digital Junior

Una vez seleccionado el de nuestra preferencia pulsamos sobre la opcin Activar. Para volver al escritorio pulsamos sobre la opcin Mi Tablero. Desde Opciones > General podremos configurar: Ttulo del blog, Descripcin (Se visualizar debajo del ttulo), Desde Idioma se podr modificar el idioma del blog y de la interfaz de usuario.

Para crear una entrada debemos pulsar Aadir dentro de la Categora Entradas, para modificar una entrada ya creada se deber pulsar la opcin Editar.

Barra de Herramientas
Introducir Texto / Imagen Video Msica Cdigo HTML

Agregar /eliminar Negrita Cursiva Alineacin hipervnculo

Insertar Leer ms

Vietas Numeracin

28

Taller de Blog

UTN FRBA- Digital Junior

Le asignamos un ttulo a la nueva entrada, por ejemplo, Wave, la nueva apuesta de Google, en el cuadro inferior ingresamos el texto de la entrada. Se ha utilizado el botn Insertar etiqueta ms, con lo cual slo ser visible en principio el primer prrafo de la entrada.

Para pulsamos

agregar sobre la

Categora opcin

etiqueta New

Add

Categora, escribimos Teora y hacemos clic en Aadir. Para asignarle una etiqueta, la escribimos en el recuadro y pulsamos aadir. Por ltimo tildamos las casillas: Permitir Comentarios y Permitir trackbacks y pingbacks en esta pgina y pulsamos el botn Publicar.

Para visualizar el blog debemos pulsar en el nombre del blog.

29

Taller de Blog

UTN FRBA- Digital Junior

Insertaremos una imagen en la entrada recientemente creada, para ello pulsamos sobre la opcin Mi Tablero para acceder al escritorio, hacemos clic en Editar de la categora Entradas y nuevamente en opcin Editar de la citada entrada. Pulsamos el botn Aadir imagen, y por medio del botn Elegir Archivo buscamos la imagen en nuestro disco. Luego escogemos su alineacin y su tamao y pulsamos en Insertar en la entrada.

30

Taller de Blog

UTN FRBA- Digital Junior

Si se quisiera modificar la imagen insertada, al hacer doble clic sobre ella aparecern dos botones uno para modificarla y el otro para eliminarla.
Modificar Eliminar

Agregaremos

un

enlace

en

la

entrada

la

siguiente

URL:

http://www.latercera.com/contenido/739_187236_9.shtml. Para ello, estando en la vista Visual, escribimos un texto que sirva de enlace, por ejemplo Sitio Web, lo seleccionamos y luego pulsamos el botn Hipervnculos. En la ventana que se abre ser posible configurar: La URL del enlace, el Destino (especificamos si la pgina se abrir en la misma ventana o en otra nueva) y su ttulo, por ltimo hacemos clic en el botn Insertar.

Agregar elementos de pgina (Widgets)

Los widgets son porciones de la pgina que ofrecen funcionalidades especiales al blog. Con el tiempo el nmero de estos ha ido en aumento. Podemos incluir las ltimas actualizaciones de nuestra cuenta en Twitter,

31

Taller de Blog

UTN FRBA- Digital Junior

un recuadro de chat Meebo, entradas RSS de cualquier blog, un buscador, la nube de etiquetas, archivos compartidos en Box.net, las ltimas entradas o comentarios, entre otros. Los widgets de texto nos permitirn agregar cdigo

HTML/XHTML o simplemente texto. As podremos incluir, por ejemplo, la licencia Creative Commons o el cdigo de Blogalaxia. Lo que no est permitido es el uso de JavaScript o CSS en estos widgets; automticamente ser suprimido este tipo de cdigo. Para agregar un elemento de pgina debemos recurrir a la opcin Apariencia> Widgets. Para agregarlos a la barra lateral basta con arrastrarlos con el mouse sobre sta.

Se han agregado los siguientes widgets: Archivos: Donde se irn listando todos las entradas cronolgicamente agrupadas por mes

32

Taller de Blog

UTN FRBA- Digital Junior

Buscar: Mediante dicho elemento se podr iniciar una bsqueda de las entradas pertenecientes al blog.

Nube de etiquetas: Se presentan listadas todas las etiquetas con distinto tamao de fuente.

Calendario: El calendario que nos ofrece WordPress slo muestra los das, no pudindose programar eventos como ocurre con el de Google.

33

Taller de Blog

UTN FRBA- Digital Junior

Enlaces: En este Widgets podremos agregar una lista de enlaces a sitios web relacionados.

Para ello debemos pulsar la opcin Aadir de la categora Enlaces, en la ventana que se abre deberemos ingresar el nombre del sitio, la direccin, una descripcin (Opcional), y por ltimo pulsar en Aadir Enlace:

Finalmente, cuando el usuario apoye el mouse sobre alguno de los enlaces publicados podr apreciar una vista previa del mismo. En la siguiente imagen al apoyar el mouse sobre el enlace Recursos Educativos se observa una vista previa del sitio.

34

Taller de Blog

UTN FRBA- Digital Junior

Diferencias entre Blogger y WordPress

Wordpress y Blogger son los dos servicios gratuitos ms conocidos y usados para crear blogs. La mayora usa blogger, y la principal razn es que tiene el respaldo de Google. Sin embargo, el CMS por excelencia para creacin de blogs es de lejos Wordpress (un CMS es una aplicacin que se instala sobre un servidor, por ejemplo, una empresa grande no necesitar un servicio gratuito para crear un blog sino que contratar su propio servidor y usar un programa para crear ese blog; ese CMS es Wordpress).

35

Taller de Blog

UTN FRBA- Digital Junior

En cuanto al Diseo si bien los blogs creados en WordPress tienen un aspecto ms profesional, a los blogs creados en Blogger se les puede aplicar una plantilla descargada desde Internet, por ejemplo desde: (http://www.templates-blogger.com)

Blog en Blogger

Blog en WordPress

En cuanto a la Creacin de entradas, Blogger permite trabajar perfectamente editando cdigo HTML, inclusive es posible mediante la etiqueta iframe incluir pginas web enteras, no as WordPress, el cual por cuestiones de seguridad borra este tipo de cdigo, utilizando uno especial para enlazar videos, archivos de audio, archivos desde Scribd y

presentaciones desde Slide. Ejemplo de la etiqueta iframe en Blogger: <div align="center"> <iframe src="http:nombre pgina web.html" frameborder="0"

height="460" width="580" scrolling="auto"></iframe></div> Ejemplo cdigo especial en WordPress: [slideshare id=1595194&doc=procesador-090616221637-phpapp02] [youtube=http://www.youtube.com/watch?v=CLs-00S0wa4] [scribd id=8544831 key=key-zio6cxqo41zmn3apl8u mode=list] [audio http://media.libsyn.com/media/tuingles/Tu_Ingles_Sesion_49.mp3]

36

Taller de Blog

UTN FRBA- Digital Junior

En cuanto a los Elementos de pgina (llamados Gatget en Blogger y Widgets en WordPres) en WordPress tampoco est permitido el uso de JavaScript o CSS en los Widgets, ya que automticamente ser suprimido este tipo de cdigo, no sucede lo mismo en Blogger. WordPress puede instalarse de manera local, en su PC, en cambio, los blogs creados en Blogger slo pueden ser editados de manera online, pudindose realizar una copia de seguridad de la plantilla utilizada.

WordPress genera una cantidad de tags de bsqueda que a su vez general links (enlaces), como un directorio hara, ayudndonos en el posicionamiento del blog.

En conclusin se puede inferir que si necesitamos un blog para utilizarlo con nuestros alumnos la opcin ms apropiada es Blogger, por su manejo sencillo, y sobre todo por la facilidad que nos brinda en cuanto a trabajar con HTML, JavaScript, cantidad til de Gatget disponibles

(Calculadoras, graficadores, etc).

37