puerta18 blog clase 11-2012

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

1

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


2

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.


3

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:


4

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.


5

• 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.


6

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


7

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.


8

3. UTILIZAR FLICKR PARA ALMACENAR IMÁGENES DEL BLOG Flickr (http://www.flickr.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.


9

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.


10

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:


11

A continuación se abre la siguiente pantalla;


12

Hacemos clic en Publicar entrada:

Accedemos al blog para verificar la entrada con el video


13

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.


14

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.


15

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


16

• Accedemos al documento.

• Clic en la opción Embed


17

• 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í:


18

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


19

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:


20

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


21

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


22

• Presionar guardar Y ahora el blog quedo así:


23

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


24

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

puerta18 blog clase 11-2012

Documents