CREAR UN POST
1. Escribir un post.
Bueno, llegó la hora de comenzar y lo primero que tenéis que hacer es entrar a vuestro blog y crear una nueva entrada, para ello pulsaremos el botón Acceder. Y en la nueva ventana introduciremos la dirección de correo que usamos para crear el blog y la contraseña. En la nueva ventana pulsar el botón NUEVA ENTRADA.
Nos encontramos con una solapa denominada Creación de entradas (1), con tres opciones: Crear, Editar entradas y Moderar comentarios. Nosotros estamos situados en Crear (2); en ella podemos ver un formulario donde deberemos poner él titulo de nuestro post (3) y debajo el artículo que queremos redactar (4).
1
2
3
4
El lugar donde se redacta el artículo es un procesador de texto (al estilo “word”) con una barra de herramientas donde podemos:
• Editar el formato (1): tipo y tamaño de texto, negrita, cursiva, color, enlace...
• Corregir ortografía (2).
• Añadir imágenes o videos (3).
• Borrar formato (4).
Por otro lado, tenéis la opción de editar el artículo en formato HTML (5). Una vez redactado el articulo, podemos o bien guardarlo (6) (para editarlo más adelante) presionando el botón de GUARDAR AHORA; o bien publicarlo (7) para que toda la gente que ingrese en vuestro blog, pueda verlo presionando el botón de PUBLICAR ENTRADA.
Al finalizar de publicar el mensaje, llegaremos a una pantalla, donde nos confirma la publicación del artículo con el siguiente mensaje:
2. Incluir el decálogo, las imágenes y el vídeo en el post.
El código html de las imágenes de Picasa, puedes cogerlo tú mismo. Acude a dicho manual y encontrarás un apartado desarrollado explícitamente para ti.
En cuanto a los códigos html del decálogo en issuu y del vídeo, deberán ser tus compañeros (el “publicista” y el “reportero”) los que te lo envien. Si no los recibes, deberás ponerte en contacto con ellos, para solicitarles dicho texto.
Cuando ya tengas todos los códigos html, deberás realizar los siguientes pasos:
• Entra en el Blog.
• Accede a la pestaña de entrada del blog para crear un nuevo post.
• Escribe el Título del post (1).
• Escribe el texto del post dejando los huecos donde irán el decálogo, las imágenes del álbum y el vídeo del “making off”.
• Copia el código html del decálogo.
• Sitúa el cursor del ratón donde quieras que aparezca el decálogo.
• Accede a la pestaña de Edición de Html (2).
• Pega el código html.
• Vuelve a la pestaña de Redactar (3).
• Sitúa el puntero del ratón donde quieras que aparezca el álbum de fotos.
• Accede a la pestaña de Edición de Html (2).
• Pega el código html.
• Vuelve a la pestaña de Redactar (3).
• Sitúa el puntero del ratón donde quieras que aparezca el vídeo del “making off”.
• Accede a la pestaña de Edición de Html (2).
• Pega el código html.
• Haz clic en Vista previa (3), si quieres ver el resultado del post.
• Para finalizar, publica la entrada (4).
Inserción de imágenes en el blog.
Blogger ha actualizado recientemente el editor de entradas de los blogs y lo ha modificado sustancialmente. Ahora, la inserción de imágenes se realiza de forma distinta a como se hacía con el antiguo editor, y se ha mejorado el procedimiento. Aunque el contenido de los blogs sigue siendo principalmente textual, las imágenes cumplen funciones importantes, y su uso implica el conocimiento de aspectos que hay que tener muy presentes para que resulten útiles e ilustrativas en los blogs.
1. Procedimiento para insertar imágenes en el blog de Blogger
Para actualizar el editor de entradas, hay que cambiar la opción en Configuración -> Básico -> Seleccionar editor de entradas -> Editor actualizado.
El procedimiento para insertar una imagen es sencillo, y se puede observar en este vídeo que he creado para mostrarlo:
Si queremos insertar una imagen, hacemos clic en el icono de añadir imagen, destacado con un círculo rojo en la siguiente imagen:
Y entonces aparece una ventana emergente, como se ve en la siguiente imagen, donde tenemos un menú a la izquierda que nos permite elegir una imagen desde nuestro blog, desde uno de nuestros álbumes de Picasa o desde un documento web con su dirección URL. Muchos no saben que cada vez que incluimos una imagen en nuestro blog, queda guardada automáticamente en un álbum de Picasa que lleva el nombre de nuestro blog.
En principio, lo más habitual es subir la imagen desde nuestro disco duro, que es la opción inicial:
- Primero, pulsamos el botón Elegir archivos para buscar la imagen en nuestro disco duro.
- Una vez subida la imagen, aparece en tamaño pequeño. Para incluirla en el editor del blog podemos hacer doble clic sobre ella o pulsamos el botón Añadir imágenes seleccionadas.
Cuando hacemos clic en la imagen, aparece junto a ella una etiqueta superpuesta de color azul que incluye las opciones, como podemos ver en la siguiente imagen:
Haciendo clic en las opciones, podemos elegir el tamaño que queramos para la imagen, y también podemos alinearla en el documento. Si la alineamos a la izquierda o a la derecha de un párrafo, conviene que la imagen sea pequeña para que no quite mucho espacio al texto. Pero, por lo general, lo más aconsejable es centrar las imágenes en el documento. Por último, está la posibilidad de incluir un texto como pie de foto en la opción Añadir leyenda.
Cuando una imagen se inserta dentro de una entrada del blog, el editor la reduce, y permite elegir entre cuatro tamaños, además del tamaño original. Casi siempre es aconsejable dejarla al tamaño original si ya la hemos ajustado con un programa adecuado antes de subirla. Si el tamaño es mayor que el de la imagen, ésta se ve un tanto borrosa y pixelada, con lo cual es mejor elegir un tamaño más reducido. Además, hay que tener cuidado porque el tamaño Extra grande crea imágenes que puede que no se vean enteras si superan la anchura del diseño de la entrada, o pueden invadir el lateral del blog.
Si queremos personalizar el tamaño a nuestro gusto, podemos acudir al código fuente. He comprobado que para ello primero hay que dejar la imagen con un tamaño mayor que el que tiene entre los cuatro que se pueden elegir; por ejemplo el Extra grande, pues si no, queda pixelada. Y después vamos al código HTML de la imagen y modificamos sus atributos width (anchura) y height (altura), como se ve en el siguiente código, que corresponde a la imagen anterior cuyo pie de página es "Imagen añadida al editor":
<img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI1snPU2KJg15t8iOyMOM_o9LmP9JogJIE9HAOiQpbIFC4iXifeyCJ173PI-ZLhbHA7UrQ7-qj2PbSfhQi5DolTCWv8MPgPrets0Gll0ZLpgKu4VqK6ANnXIZRVvkjJ1bru_RQjhQg2Hc/s640/subir_imagen2.jpg" width="528" />
Lo bueno del editor es que si incluimos una imagen demasiado grande, la reduce al insertarla en el editor, pero se puede ver en su tamaño original haciendo un clic sobre la imagen. En este caso, la imagen se abre en la misma ventana, con la consiguiente molestia de tener que volver a la página anterior para seguir leyendo la entrada. Véase aquí un ejemplo:
De todas formas, si la imagen que tenemos es muy grande, lo mejor puede ser recortarla o reducirla con programas de retoque fotográfico o con servicios web como Picnik, que resultan muy cómodos y útiles.
Otras aplicaciones web pueden solucionar un error muy habitual en los blogs, que es incluir muchas imágenes grandes en una entrada, lo que ralentiza la carga de la página y recarga el contexto de forma molesta para el lector. Una solución suele ser la de insertar un reproductor de pase de diapositivas como los que proporcionan los servicios web de alojamiento de imágenes Flickr y Álbumes Picasa que trato en elos artículos Insertar álbumes de Flickr en el blog e Insertar álbumes de Picasa en el blog. Aquí vemos uno de mis álbumes de Flickr en formato de diaporama:
En otros casos, las diapositivas pueden mostrarse en forma de vídeo, como los que se pueden hacer fácilmente usando la aplicación Picasa, con la que he realizado este vídeo de fotografías de San Saturio, tomadas mientras paseaba por donde lo hacía don Antonio Machado:
2. El código HTML de la imagen
Conviene conocer el código HTML de las imágenes, sobre todo porque Blogger no incorpora dos atributos que resultan útiles por motivos de accesibilidad:
- Texto alternativo (alt): toda imagen debe incluir un texto breve que la describapara que las personas ciegas puedan saber de qué se trata cuando sus navegadores especiales les leen los contenidos de un documento web. Además, este texto alternativo lo usan los buscadores para clasificar las imágenes. ¿Cómo puede saber Google que una fotografía es de un perro si no se lo indicamos de alguna manera?
- Título (title): es conveniente incluir el atributo de título en etiquetas de HTML siempre que pueda ser útil; por ejemplo, cuando tenemos más de una imagen y queremos que el lector las distinga poniendo el cursor del ratón encima, porque entonces aparece el texto que hemos escrito en este atributo en un marco de texto de color. Pruébese colocando el cursor encima de la imagen del perro.
Estos importantes atributos no los incluye Blogger y, por tanto, hay que tener mucha paciencia o muchas ganas para hurgar en el código fuente y colocarlos donde corresponden, pero aquí quedan para que se sepa y para que Blogger los incluya en alguna actualización.
El código HTML de la imagen del perro tendría que ser el siguiente si le incluímos estos dos atributos:
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_ZUUjnvw1Aab7VTOtP9MPxBAVFZqaXszh0G7tiD10NvHxnKga2guJWlQD8BrgLqhKFfIOCyyH4wy_vxivgm5vT3by75HdlGdq8qE87bppEQzczqacDMzOhbFAmKdBqiMn-EZX4xpB9Y/s320/pia.jpg" alt="Perra sentada en la nieve" title="Mi perra Pía" />
El código de la imagen lo buscamos donde haya una etiqueta img de imagen que incluya la ruta (src) del archivo de la imagen que sabemos que se llama, en este caso, pia.jpg. En letra roja aparece el texto alternativo (alt) que describe la imagen: "Perra sentada en la nieve", y el título (title): "Mi perra Pía", texto con el que identifico esta foto y que se puede leer poniendo el cursor del ratón encima de la imagen.
3. Incluir un enlace en una imagen
A veces puede que queramos incluir un enlace en una imagen de manera que al hacer clic sobre la imagen nos aparezca la página enlazada. Este procedimiento se realiza de forma muy sencilla en muchos editores, simplemente haciendo clic en la imagen y pulsando en el icono de enlaces, pero resulta que en el editor de Blogger esto no se puede realizar.
Lo que siempre podemos hacer en Blogger es incluir el código HTML que nos permite crear un enlace en una imagen. Pero aquí tenemos otro problema: Blogger enlaza todas las fotos para que se vean en otra pantalla a tamaño completo cuando hacemos clic en ellas, por tanto tenemos que sustituir ese enlace por el que queramos.
Veamos un ejemplo con la primera imagen de este artículo. Si abrimos la Edición HTML de la entrada, veremos que el código es el siguiente:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiydIYjhokiZCYd0zzXBGInGTlBHJvD-maHenfLN5KBPfnwwnBGbl-tqIyol1ipZwektFZrkwkZHRyW7FPAy-ImvEMpf8KRYCGpZLZfd3EIOatZarTMra2ZPB3lOpRymVASD_BRC11vF10/s1600-h/paleta.jpg" imageanchor="1" style="clear: left; float: left; margin-right: 1em; margin-top: 7px;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiydIYjhokiZCYd0zzXBGInGTlBHJvD-maHenfLN5KBPfnwwnBGbl-tqIyol1ipZwektFZrkwkZHRyW7FPAy-ImvEMpf8KRYCGpZLZfd3EIOatZarTMra2ZPB3lOpRymVASD_BRC11vF10/s320/paleta.jpg" /></a></div>
En color rojo he puesto todo el código que tenemos que eliminar: el enlace y también un código de estilos que incluye Blogger. Lo que nos interesa aquí es el atributo href (en azul en el código), dentro de la etiqueta <a> de enlaces, en el que insertamos la dirección web (URL) de la página que queremos enlazar. Después de borrar el código en rojo, tendremos que insertar el enlace que nos interese; éste, por ejemplo:
href = "http://www.w3c.es"
Esta es la página en español del World Wide Web Consortium, que vela por la Web y su código HTML. Al final, el código completo de nuestra imagen con enlace será el siguiente, al que le he incluido en color rojo el código HTML necesario para abrir el enlace en otra ventana o pestaña del navegador, por si interesa:
<div class="separator" style="clear: both; text-align: center;">
<a href = "http://www.w3c.es" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiydIYjhokiZCYd0zzXBGInGTlBHJvD-maHenfLN5KBPfnwwnBGbl-tqIyol1ipZwektFZrkwkZHRyW7FPAy-ImvEMpf8KRYCGpZLZfd3EIOatZarTMra2ZPB3lOpRymVASD_BRC11vF10/s320/paleta.jpg" /></a></div>
Y aquí tenemos la imagen que enlaza la página del W3C en otra ventana:
4. Enlaces de interés sobre blogs especializados e imágenes gratuitas
Si queremos trabajar con todo tipo de multimedia en los blogs, conviene seguir Roa Multimedia, blog de José Mª Campo, y El balcón abierto, blog de Ángel Puente, profesores ambos especializados en estos temas.
Y si queremos obtener imágenes gratuitas o con una licencia Creative Commons que nos permita su uso, aquí hay unas cuantas direcciones donde conseguirlas:
Blogger permite que nuestros lectores dejen sus comentarios en nuestras publicaciones y para ello nos provee de tres formatos distintos.
El primero es una página completa, a mí gusto es el menos conveniente, ya que cuando alguien quiere ver o publicar un comentario se cambia de la página del blog a una nueva página con los comentarios hechos por los otros usuarios, es decir, se abandona por completo la entrada para ir a la sección de los comentarios.
Para configurarlo a esta modalidad vamos a Configuración | Entradas y comentarios | Ubicación de los comentarios. Selecciona la opción Página completa y guardamos cambios.
El segundo es a través de una ventana emergente, de modo que cuando un usuario haga click en comentarios una mini ventana aparecerá con los comentarios hechos por los otros usuarios así como el formulario para agregar un comentario. Se ve de esta forma:
Para que quede de este modo vamos nuevamente a Configuración | Entradas y comentarios | Ubicación de los comentarios. Seleccionamos la opción Ventana emergente y guardamos cambios.
El tercero es el formulario incrustado. De este modo tanto los comentarios hechos, como el formulario para dejar un comentario se encuentra al final del post. Es el más popular debido a que no abandonas la página y sin salirte puedes ver los comentarios hechos y volver a leer el artículo antes de dejar tu comentario.
Para que quede así vamos a Configuración | Entradas y comentarios | Ubicación de los comentarios. Seleccionamos la opción Debajo de la entrada y guardamos cambios.
Otras configuraciones
Tristemente he visto en algunos blogs que gente con problemas de racismo, sexismo, homofobia, xenofobia, etc. les encanta dejar comentarios ofensivos en los blogs. Lamentablemente muchos autores de estos blogs se dan por vencidos y eliminan el blog o simplemente lo abandonan. Por suerte Blogger nos brinda una opción para controlar estos abusos. Simplemente vamos a Configuración | Entradas y comentarios | Moderación de comentarios. Ahí marcamos la opción Siempre, de este modo cuando alguien deje un comentario ustedes decidirán si el comentario se publica o no. Verán como a la larga la gente ofensiva se cansará de escribir comentarios que no se publican y dejará de hacerlo. Para posteriormente deshabilitarlo marcamos la casilla Nunca.
Una medida de evitar spam es por medio de la verificación de palabra también conocido como CAPTCHA; para habilitarlo vamos a Configuración | Entradas y comentarios | Mostrar verificación de palabras, y marcamos la casilla Sí. Ahora cada vez que alguien quiera dejar un comentario le aparecerá esta ventanita:
A modo personal yo recomiendo que no habiliten esta opción por dos razones, una, es que es raro que un programa generador de spam encuentre nuestro blog y lo utilice para mandar spam; y otra es que es tedioso para los lectores estar perdiendo tiempo en escribir la palabra, y si no le atinan a la primera seguramente se hartarán y preferirán no dejar ningún comentario, así que eso queda a consideración de ustedes.
Administrar y Personalizar nuestro Blog
Ahora supongamos que cerramos el navegador y queremos entrar otro día o en otro momento en la administración de vuestro blog. Recordaros que para visualizar vuestro blog tenéis una dirección como #####.blogspot.com (aquella que se eligió al crear el blog). Para entrar a la administración, lo hacemos desde www.blogger.com introduciendo vuestro nombre de usuario y contraseña.
Desde este panel podemos realizar varias acciones:
· Crear nuevos blogs con el mismo usuario, y así disponer de varios diarios con diferentes temáticas cada uno (1).
· Editar vuestro Blog (2).
· Modificar el perfil de usuario, cambiar la contraseña de acceso, cambiar el idioma e incluso añadir una foto a vuestro perfil (3).
. Una sección de ayuda (4).
