Puerta18 blog clase 11-2012

Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs

PUERTA 18
Curso de Web Marketing 2012
Modulo 3 – REDES SOCIALES Y BLOGS

Clase 11- Imágenes y Multimedia

1. DONDE ENCONTRAR IMÁGENES GRATUITAS, SERVICIO ONLINE FLICKR. ...... 2
2. UTILIZAR PICASA PARA ALMACENAR IMÁGENES DEL BLOG.......................... 3
3. UTILIZAR FLICKR PARA ALMACENAR IMÁGENES DEL BLOG .......................... 8
4. PRACTICA – INCLUIR IMAGEN .................................................................. 9
5. VIDEOS: ALMACENAR VIDEOS, VIDEOS DE YOUTUBE, PODCAST Y
PRESENTACIONES. ........................................................................................ 9
6. PRACTICA –INCLUIR VIDEO ....................................................................18
7. WIDGESTS – INTRODUCCIÓN, WIDGETS DE COMENTARIOS RECIENTES,
EDITAR Y ELIMINAR ......................................................................................19
8. PRACTICA –WIDGETS.............................................................................24
9. EN LA PROXIMA CLASE VAMOS A VER ......................................................24

1


1. DONDE ENCONTRAR IMÁGENES GRATUITAS, SERVICIO ONLINE FLICKR.

Las imágenes son un elemento fundamental en un blog, tanto para
personalizarlo (por ejemplo, poniendo una imagen en la cabecera del blog) como
para ilustrar las entradas del blog.

Blogger no sólo proporciona espacio en sus servidores para almacenar u
hospedar el blog, sino también para las imágenes y otros elementos multimedia que
utilicemos en él.

Adicionalmente, aparecen distintos servicios de publicación de imagen, como el
popular Flickr, donde podemos crear una cuenta para almacenar nuestras imágenes
en Internet e incluso compartirlas con otras personas.

Algunos sitios web donde encontraremos imágenes gratuitas o que podremos
utilizar en nuestro blog, son:

• Banco de imágenes gratuitas CNICE (Ministerio de Educación y Ciencia de
España). http://bancoimagenes.cnice.mec.es

• Openphoto. http://www.openphoto.net

• Photobucket. http://photobucket.com

• Flickr Creative Commons search. http://www.flickr.com/creativecommons/

Sin embargo, es importante entender que el hecho de que se trate de imágenes
gratuitas no significa que podamos utilizarlas sin más.

Debemos leer las condiciones de uso de estos recursos fotográficos y comprobar
bajo qué licencia han sido compartidos para respetarla.

Actualmente la licencia Creative Commons es una de las más utilizadas para
todo este tipo de recursos, por lo que debemos entenderla.

Normalmente encontraremos un enlace a la licencia con la que se ha publicado la
imagen, donde se indica claramente qué es lo que se puede hacer con la imagen y
qué no.

En muchas ocasiones se requiere hacer mención al autor y sitio web donde está
alojada la imagen.

Poder incluir imágenes gratuitas en nuestro blog permitirá mejorar el contenido
del mismo de una forma muy significativa. Por ello es habitual que los autores de
blogs pertenezcan a estas comunidades virtuales, como Flickr, Photobucket, etc.

2


2. UTILIZAR PICASA PARA ALMACENAR IMÁGENES DEL BLOG

Ya sea porque hayamos descargado imágenes desde alguno de estos sitios web de
imágenes gratuitas o porque dispongamos de nuestras propias fotografías, en Blogger
sabemos que es fácil incluir imágenes en las entradas del blog a través del botón
Insertar imagen y buscándolas en la PC.

Blogger carga esas imágenes y las sube a alguno de sus servidores,
almacenándolas allí.

Podemos conocer la URL de una imagen de nuestro blog accediendo a sus
propiedades.

Por lo tanto, si deseamos utilizarla en otras entradas del blog, lo único que
tendremos que hacer es copiar esta URL e indicarla al crear dicha entrada.

Desde el panel de control,
ENTRADAS
Nueva entrada
Insertar imagen, aparece la siguiente pantalla:

3


Blogger utiliza el servicio Álbumes web de Picasa (otro servicio adicional de
Google) para almacenar las imágenes de los blogs. Se puede acceder a este servicio
en http://picasaweb.google.com/home.

En Picasa, las imágenes correspondientes a blogs de Blogger aparecen
guardadas en álbumes marcados con la B de Blogger, como puedes ver en la figura
de la página siguiente.

En los álbumes web encontramos las imágenes que estamos utilizando en las
entradas del blog y métodos para incluirlas directamente en un sitio web, como un blog.

Así pues, si seleccionas una de las imágenes que tienes en los álbumes web de
Picasa, comprobarás que accedes a la página de la imagen, donde tienes la opción
de obtener el vínculo (o URL) de la foto.

De hecho, puedes obtener el vínculo concreto a la imagen o el HTML que
podríamos incluir en la entrada del blog para que apareciera esta imagen.

Eso sí, antes de copiar dicho código HTML, asegúrate de elegir el tamaño
deseado de la imagen.

Aunque es posible subir imágenes en los álbumes web de Blogger alojados en
Picasa directamente desde la Web, se hace más cómodo si lo hacemos desde una
aplicación que hay que instalar en el ordenador. Puedes descargarte es aplicación
desde aquí, se trata de Picasa: http:// picasa.google.com

Ahora. Para subir fotos desde picasa, tenemos dos opciones:

1ra Opción:
• Ingresar a http://picasaweb.google.com/home. dar de alta un álbum,
marcado como B y subir las fotos que nos interesan para el blog.
• Acceder a blog y desde Entradas, Nueva entrada, Insertar imagen,
seleccionamos Desde álbum Web Picasa y seleccionamos la foto.

4


• Añadir la imagen seleccionada, al acceder a la pantalla de la entrada, Blogger,
nos da la posibilidad de cambiar el tamaño de la imagen, alinearla (izq., dcha.,
centro), añadir leyenda, propiedades o eliminarla.
• Completar la entrada.
• Ver vista previa
• Guardar los cambios
• Publicar la entrada

Así quedaría mi entrada con imagen.

5


2da opción:
o Ingresar a Picasa previa instalación efectuada desde la url http://
picasa.google.com .
o Seleccionar una imagen del álbum de fotos cargadas para nuestro
blog

o Seleccionar un blog
o Elegir un diseño
o Elegir el tamaño de la imagen
o Presionar el botón Continuar

6


o Al presionar Continuar, se abre una ventana en la que vemos la
entrada en nuestro Blog.
o Completamos titulo, textos.
o Presionando Redactar, accedemos al blog, para terminar de armar
la entrada y ver su vista previa.
o Guardamos como borrador, o publicamos.

La entrada en nuestro blog quedaría así:

Cené en cuenta que si eliminas una imagen en el álbum web del blog, ésta
dejará de mostrarse en dicho blog.

7


3. UTILIZAR FLICKR PARA ALMACENAR IMÁGENES DEL BLOG
Flickr (http://www.ﬂickr.com) es una alternativa muy utilizada a la hora de
almacenar las imágenes de un blog, ya que no sólo disponemos de un espacio gratuito
para las imágenes, sino que, adicionalmente, formaremos parte de una comunidad
de usuarios con intereses similares al nuestro.

Como sucede en todos estos servicios online, tendremos que registrarnos en
Flickr para disponer de una cuenta de usuario con la que poder cargar nuestras
imágenes. Una vez hecho esto a través del botón Crea tu cuenta, la
configuraremos para publicar fácilmente las imágenes en el blog.

Si Blogger y Picasa son servicios que proporciona Google, Flickr es un servicio
de Yahoo, por lo que es necesario disponer de lo que ellos llaman ID de Yahoo, es
decir, lo que es equivalente a una cuenta Google. Si dispones de una cuenta de
correo electrónico en Yahoo, ya dispones de un ID de Yahoo.

Una vez has iniciado sesión en Flickr con tu cuenta de usuario, podrás subir las
imágenes, para lo que se dispone de una página de carga.

Al incluir imágenes en Flickr, puedes indicar si deseas que sean públicas o
privadas, es decir, sólo disponibles para ti y, opcionalmente, para tus familiares o
amigos.

Tenemos dos alternativas para incluir las imágenes que almacenamos en
Flickr en nuestro blog.

Una es obtener la URL de la imagen y trabajar en el editor de entradas de
Blogger. Otra es crear y publicar la entrada del blog desde el propio Flickr.

8


4. PRACTICA – INCLUIR IMAGEN
- Acceder al Blog
- Crear dos entradas con una foto representativa cada una.
- Probar y publicar

5. VIDEOS: ALMACENAR VIDEOS, VIDEOS DE YOUTUBE, PODCAST Y
PRESENTACIONES.

Al igual que ocurre con las imágenes, es habitual encontrar vídeos
incrustados en las entradas de un blog.

Hasta hace poco, en Blogger era necesario que esos vídeos estuvieran
almacenados en sitios externos, por lo que se incluían enlazándolos a través del
código HTML necesario.

Sin embargo, se ha añadido el botón Añadir vídeo en el editor de entradas de
Blogger, lo que permite, de una forma muy sencilla, incluir vídeos que disponemos
en nuestro propio ordenador.

En este caso, Blogger almacena dichos vídeos en sus propios servidores,
utilizando para ello el servicio Google Video, aunque no nos permite acceder a ellos
como ocurre con las imágenes almacenadas en Picasa.

Añadir un vídeo es similar a una imagen, aunque con menos opciones.
Debemos indicar el título del vídeo y la ubicación del archivo.

Puedes utilizar vídeos en formato AVI, MPEG, QuickTime, Real y Windows Media
(WMV), con un tamaño máximo de archivo de 100 MB.

Blogger primero sube el vídeo en alguno de sus servidores y después lo
convierte al formato de vídeo de Flash (FLV), que es el formato más adecuado
para publicarlo en la Web.

Además, como lo incluye como un objeto más de la entrada, podremos
cambiar su tamaño y posición fácilmente.

El vídeo se incluye con una barra de reproducción propia, que puede utilizar el
usuario para reproducir y pausarlo a su voluntad.

La ventaja de esta alternativa para incluir vídeo es que no necesitamos crear
ninguna cuenta adicional en ningún servicio online para ello, ya que Blogger
almacena los vídeos en sus servidores.

9


Incluir videos de Youtube - http://www.youtube.com

Siguiendo los siguientes pasos, vamos a poder insertar un video desde
Youtube en nuestro blog:

• Encontrar el vídeo deseado en YouTube y buscar el código
necesario para incluirlo en la entrada de Blogger.

Presionando en Compartir, accedemos a los iconos de redes entre otros,
optamos por Blogger:

10


A continuación se abre la siguiente pantalla;

11


Hacemos clic en Publicar entrada:

Accedemos al blog para verificar la entrada con el video

12


El vídeo se mostrará en la entrada del blog, presentando su propia barra de
reproducción. Esto permite que el lector de nuestro blog pueda reproducirlo
directamente desde el blog sin necesidad de acudir a YouTube.

Prácticamente de la misma forma se pueden incluir podcasts o archivos de
audio en las entradas del blog.

Para ello, simplemente tenemos que acudir a alguno de los servicios online
que permiten almacenar y crear podcasts. Después copiaremos el código HTML
necesario para incluirlos en nuestro blog de Blogger y ya está.

Algunos de los sitios web que puedes visitar son:

• Goear (http://www.goear.com)
• Evoca (http://www.evoca.com)

Para lo cual, ingresamos a alguno de los sitios web, por Ej. Goear, y buscamos la
música que queremos subir a nuestro blog y tomamos el código html que se genera
al quererlo compartir.

13


Con ese código, ingresamos a nuestro blog:
Panel de herramientas
Entradas
Nueva entrada
HTML

Copiamos el código, vemos vista preliminar, grabamos y publicamos.

14


La entrada en el blog, queda así

Presentaciones
El último tipo de contenido multimedia que vamos a ver cómo incluir en un
blog son las presentaciones.

Si has utilizado alguna vez PowerPoint, ya sabes lo que es una presentación.
Puedes incluir este tipo de archivos en las entradas del blog si están almacenadas en
algún servicio externo a Blogger.

El servicio más popular en este caso es Slideshare
(http://www. slideshare.net), donde puedes subir tus propias presentaciones si
te registras, así como buscar otras apropiadas para el contenido del blog.

Al subir una presentación de PowerPoint u OpenOffice en Slideshare, ésta
pierde las transiciones y otros efectos que pudiera tener, pero se convierte en un
objeto que podemos incluir en nuestro blog.

El procedimiento es el mismo que hemos visto con los vídeos y podcasts:
accederemos a la página de la presentación que nos interesa y copiaremos el código
HTML necesario para incluirlo en el blog, que en este caso encontraremos en el campo
Embed.

La presentación se incluye junto a un reproductor que nos permite avanzar o
retroceder entre el conjunto de diapositivas, como puedes ver en la figura de la
página siguiente.

Empecemos:

Ingresamos a Slideshare y creamos una cuenta.
Confirmamos la suscripción que recibimos por mail
Subimos la presentación que nos interesa
Una vez validada la info, aparece la siguiente pantalla

15


• Accedemos al documento.

• Clic en la opción Embed

16


• Clic en la opción Copy
• Accedemos a nuestro blog
• Panel de herramientas – Entradas - Nueva entrada –
HTML
• Copiamos el código de la presentación
• Vista previa.
• Grabar y publicar

El blog quedaría así:

17


Importante: Recuerda mencionar la procedencia de estos elementos que
incluyes en tu blog si no son propios

6. PRACTICA –INCLUIR VIDEO
o Acceder al Blog
o Acceder a www.youtube.com y seleccionar un video para incluir
en el blog.
o Copiar el código necesario para incluirlo en el blog.
o Crear una nueva entrada en el blog, pegar el código copiado en
youtube.
o Verificar la reproducción del video.
o Seleccionar un podcast o archivo de audio.
o Crear una nueva entrada en el blog que reproduzca el audio.
o Verificar la reproducción del audio
o Ingresar a www.slideshare.net.
o Copiar el código para incluir una presentación en el blog (buscar
una presentación de las clases del curso .pps)
o Crear otra entrada y copiar el código del punto anterior.
o Verificar el funcionamiento

18


7. WIDGESTS – INTRODUCCIÓN, WIDGETS DE COMENTARIOS RECIENTES,

Si visitamos algunos de los blogs más famosos tanto nacionales como
internacionales, nos daremos cuenta de que sus páginas están llenas de distintos
elementos conocidos como widgets o gadgets.

Estos elementos son pequeñas aplicaciones o utilidades que amplían el contenido
del blog. Podemos encontrar widgets prácticamente para todo:

La ventaja de publicar un blog en una plataforma como Blogger es que millones de
usuarios la utilizan, lo que favorece la aparición de estos widgets.

Algunos de ellos son creados por el propio equipo de Blogger, por lo que su
utilización es realmente sencilla, sin necesidad de modificar directamente el código de
la plantilla del blog.

Otros widgets son creados por programadores externos, pero normalmente
también es sencilla su instalación. En esta lección conoceremos algunos de los
widgets más populares.

Los Widgets de Blogger

Los widgets que Blogger proporciona para personalizar el blog.

Para accederlos, vamos al Panel de herramientas – Diseño y se despliega la
siguiente pantalla:

19


La ventana que aparece al pulsar en el enlace anterior muestra el conjunto de
widgets preparados por el equipo de Blogger.

Veamos para qué sirven algunos de ellos:

• Presentación: permite crear una presentación con las imágenes publicadas en
el blog.

• Encuesta: para realizar una pregunta y obtener las respuestas de los
lectores del blog. Se muestran estadísticas automáticamente.

• Lista y Lista de vínculos: permiten crear una lista de texto y de vínculos,
respectivamente.

Por ejemplo, para crear una lista de nuestros sitios web favoritos o blogs que

20


solemos leer (lo que se conoce como blogroll), podríamos utilizar una lista de
vínculos.

• Imagen: añade una imagen en el blog en el lugar donde incluimos el
widget.

• AdSense: para añadir publicidad en el blog utilizando el servicio AdSense de
Google.

• Texto: para incluir texto en una parte del blog.

• HTML/Javascript: permite incorporar widgets de terceros, copiando el
código correspondiente.

• Feed: permite incorporar las últimas entradas de otro blog mediante la
sindicación de contenidos.

• Etiquetas: para acceder rápidamente a las entradas del blog que nos
interesan.

• Actualidad: añade los titulares de noticias actuales a través del servicio
Google Noticias.

• Barra de vídeo: para reproducir vídeos de YouTube y Google Video sin
necesidad de salir del blog.

• Logotipo: para incluir el logotipo de Blogger.

• Archivo del blog y Cabecera del blog, que disponemos en nuestro blog
desde el principio.

Ahora, voy a incluir un gagdet, elegí Botón +1

Clic sobre el gagdet seleccionado
Se abre la siguiente pantalla

21


• Presionar guardar

Y ahora el blog quedo así:

22


Desde la página de Diseño, podrás cambiarlo de ubicación si así lo deseas con la
técnica de "arrastrar con el ratón".

Widget de comentarios recientes

Para incorporar widgets "no oficiales", deberemos modificar el código de la
plantilla o hacerlo a través del elemento HTML/ Javascript, donde normalmente
se personaliza el widget a nuestras necesidades.

Uno de los widgets más utilizados es el de los comentarios recientes. Es
habitual encontrar en una de las columnas del blog un apartado con los comentarios
recientes que han efectuado los visitantes del blog.

Para hacerlo vamos a hacer dos cosas:
1. Panel de herramientas – Plantillas – Edicion de html –
Resguardamos la versión actual
Accedemos al código y buscamos donde termina la cabecera: /header
Justo arriba de esa linea agregamos:

<script src='http://leonelhack.googlepages.com/leonelhack.js' type='text/javascript'/>

Con esta referencia lo que estamos indicando es que se busque el código del
widget en la dirección indicada.

2. Añadir el widget como un elemento HTML/Javascript.
El siguiente paso es añadir el elemento del blog que utiliza este código. Para
ello, se utilizan los elementos de tipo HTML/ Javascript.

Ahora, Panel de Herramientas, Entrada, Nueva entrada, HTML.

Titulo: Ultimos comentarios
Copiar el siguiente codigo:

<br/><script language="javascript">
var numcomments = 10;
var numchars = 60;
</script>
<script src="http://entresartenes.blogspot.com/feeds/
comments/default?start-index=1&
alt=json-in-script&callback=commentDisplay"></script>

Grabamos, publicamos y el blog queda asi

23


8. PRACTICA –WIDGETS
- Accede a la sección Diseño y agrega al menos dos widgets.
- Verificar.

9. EN LA PROXIMA CLASE VAMOS A VER
FEEDS DEL BLOG Y RECURSOS PARA BLOGS
- Breve presentación de los temas del día Procedimiento de suscripción
RSS.
- Creación de paginas estáticas – Formulario de contacto dentro del blog.
- Algunas formas de promocionar el blog.
- Avisos publicitarios con el servicio Adense o Techorati

24

Puerta18 blog clase 11-2012

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (17)

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie Puerta18 blog clase 11-2012

Ähnlich wie Puerta18 blog clase 11-2012 (20)

Puerta18 blog clase 11-2012