Puerta18 blog clase 11-2012

385 views
319 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
385
On SlideShare
0
From Embeds
0
Number of Embeds
112
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Puerta18 blog clase 11-2012

  1. 1. 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 Multimedia1. DONDE ENCONTRAR IMÁGENES GRATUITAS, SERVICIO ONLINE FLICKR. ...... 22. UTILIZAR PICASA PARA ALMACENAR IMÁGENES DEL BLOG.......................... 33. UTILIZAR FLICKR PARA ALMACENAR IMÁGENES DEL BLOG .......................... 84. PRACTICA – INCLUIR IMAGEN .................................................................. 95. VIDEOS: ALMACENAR VIDEOS, VIDEOS DE YOUTUBE, PODCAST YPRESENTACIONES. ........................................................................................ 96. PRACTICA –INCLUIR VIDEO ....................................................................187. WIDGESTS – INTRODUCCIÓN, WIDGETS DE COMENTARIOS RECIENTES,EDITAR Y ELIMINAR ......................................................................................198. PRACTICA –WIDGETS.............................................................................249. EN LA PROXIMA CLASE VAMOS A VER ......................................................24 1
  2. 2. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs 1. DONDE ENCONTRAR IMÁGENES GRATUITAS, SERVICIO ONLINE FLICKR. Las imágenes son un elemento fundamental en un blog, tanto parapersonalizarlo (por ejemplo, poniendo una imagen en la cabecera del blog) comopara ilustrar las entradas del blog. Blogger no sólo proporciona espacio en sus servidores para almacenar uhospedar el blog, sino también para las imágenes y otros elementos multimedia queutilicemos en él. Adicionalmente, aparecen distintos servicios de publicación de imagen, como elpopular Flickr, donde podemos crear una cuenta para almacenar nuestras imágenesen Internet e incluso compartirlas con otras personas. Algunos sitios web donde encontraremos imágenes gratuitas o que podremosutilizar 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ágenesgratuitas no significa que podamos utilizarlas sin más. Debemos leer las condiciones de uso de estos recursos fotográficos y comprobarbajo qué licencia han sido compartidos para respetarla. Actualmente la licencia Creative Commons es una de las más utilizadas paratodo este tipo de recursos, por lo que debemos entenderla. Normalmente encontraremos un enlace a la licencia con la que se ha publicado laimagen, donde se indica claramente qué es lo que se puede hacer con la imagen yqué 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 contenidodel mismo de una forma muy significativa. Por ello es habitual que los autores deblogs pertenezcan a estas comunidades virtuales, como Flickr, Photobucket, etc. 2
  3. 3. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs 2. UTILIZAR PICASA PARA ALMACENAR IMÁGENES DEL BLOG Ya sea porque hayamos descargado imágenes desde alguno de estos sitios web deimágenes gratuitas o porque dispongamos de nuestras propias fotografías, en Bloggersabemos que es fácil incluir imágenes en las entradas del blog a través del botónInsertar 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 suspropiedades. Por lo tanto, si deseamos utilizarla en otras entradas del blog, lo único quetendremos 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
  4. 4. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs Blogger utiliza el servicio Álbumes web de Picasa (otro servicio adicional deGoogle) para almacenar las imágenes de los blogs. Se puede acceder a este servicioen http://picasaweb.google.com/home. En Picasa, las imágenes correspondientes a blogs de Blogger aparecenguardadas en álbumes marcados con la B de Blogger, como puedes ver en la figurade la página siguiente. En los álbumes web encontramos las imágenes que estamos utilizando en lasentradas 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 dePicasa, comprobarás que accedes a la página de la imagen, donde tienes la opciónde obtener el vínculo (o URL) de la foto. De hecho, puedes obtener el vínculo concreto a la imagen o el HTML quepodrí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ñodeseado de la imagen. Aunque es posible subir imágenes en los álbumes web de Blogger alojados enPicasa directamente desde la Web, se hace más cómodo si lo hacemos desde unaaplicación que hay que instalar en el ordenador. Puedes descargarte es aplicacióndesde 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
  5. 5. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs • 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 entradaAsí quedaría mi entrada con imagen. 5
  6. 6. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs 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
  7. 7. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs 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, éstadejará de mostrarse en dicho blog. 7
  8. 8. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs 3. UTILIZAR FLICKR PARA ALMACENAR IMÁGENES DEL BLOGFlickr (http://www.flickr.com) es una alternativa muy utilizada a la hora dealmacenar las imágenes de un blog, ya que no sólo disponemos de un espacio gratuitopara las imágenes, sino que, adicionalmente, formaremos parte de una comunidadde usuarios con intereses similares al nuestro. Como sucede en todos estos servicios online, tendremos que registrarnos enFlickr para disponer de una cuenta de usuario con la que poder cargar nuestrasimágenes. Una vez hecho esto a través del botón Crea tu cuenta, laconfiguraremos para publicar fácilmente las imágenes en el blog. Si Blogger y Picasa son servicios que proporciona Google, Flickr es un serviciode Yahoo, por lo que es necesario disponer de lo que ellos llaman ID de Yahoo, esdecir, lo que es equivalente a una cuenta Google. Si dispones de una cuenta decorreo 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 lasimá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 oprivadas, es decir, sólo disponibles para ti y, opcionalmente, para tus familiares oamigos. Tenemos dos alternativas para incluir las imágenes que almacenamos enFlickr en nuestro blog. Una es obtener la URL de la imagen y trabajar en el editor de entradas deBlogger. Otra es crear y publicar la entrada del blog desde el propio Flickr. 8
  9. 9. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs 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ídeosincrustados en las entradas de un blog. Hasta hace poco, en Blogger era necesario que esos vídeos estuvieranalmacenados en sitios externos, por lo que se incluían enlazándolos a través delcódigo HTML necesario.Sin embargo, se ha añadido el botón Añadir vídeo en el editor de entradas deBlogger, lo que permite, de una forma muy sencilla, incluir vídeos que disponemosen 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 elloscomo 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 loconvierte al formato de vídeo de Flash (FLV), que es el formato más adecuadopara publicarlo en la Web. Además, como lo incluye como un objeto más de la entrada, podremoscambiar su tamaño y posición fácilmente. El vídeo se incluye con una barra de reproducción propia, que puede utilizar elusuario para reproducir y pausarlo a su voluntad. La ventaja de esta alternativa para incluir vídeo es que no necesitamos crearninguna cuenta adicional en ningún servicio online para ello, ya que Bloggeralmacena los vídeos en sus servidores. 9
  10. 10. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y BlogsIncluir videos de Youtube - http://www.youtube.com Siguiendo los siguientes pasos, vamos a poder insertar un video desdeYoutube 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
  11. 11. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y BlogsA continuación se abre la siguiente pantalla; 11
  12. 12. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y BlogsHacemos clic en Publicar entrada:Accedemos al blog para verificar la entrada con el video 12
  13. 13. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs El vídeo se mostrará en la entrada del blog, presentando su propia barra dereproducción. Esto permite que el lector de nuestro blog pueda reproducirlodirectamente desde el blog sin necesidad de acudir a YouTube. Prácticamente de la misma forma se pueden incluir podcasts o archivos deaudio en las entradas del blog. Para ello, simplemente tenemos que acudir a alguno de los servicios onlineque permiten almacenar y crear podcasts. Después copiaremos el código HTMLnecesario 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 lamúsica que queremos subir a nuestro blog y tomamos el código html que se generaal quererlo compartir. 13
  14. 14. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y BlogsCon 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
  15. 15. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y BlogsLa entrada en el blog, queda asíPresentaciones El último tipo de contenido multimedia que vamos a ver cómo incluir en unblog 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 enalgú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 site registras, así como buscar otras apropiadas para el contenido del blog. Al subir una presentación de PowerPoint u OpenOffice en Slideshare, éstapierde las transiciones y otros efectos que pudiera tener, pero se convierte en unobjeto 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ódigoHTML necesario para incluirlo en el blog, que en este caso encontraremos en el campoEmbed. La presentación se incluye junto a un reproductor que nos permite avanzar oretroceder entre el conjunto de diapositivas, como puedes ver en la figura de lapá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
  16. 16. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs • Accedemos al documento. • Clic en la opción Embed 16
  17. 17. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs • 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 publicarEl blog quedaría así: 17
  18. 18. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs Importante: Recuerda mencionar la procedencia de estos elementos queincluyes 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
  19. 19. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs 7. WIDGESTS – INTRODUCCIÓN, WIDGETS DE COMENTARIOS RECIENTES, Si visitamos algunos de los blogs más famosos tanto nacionales comointernacionales, nos daremos cuenta de que sus páginas están llenas de distintoselementos conocidos como widgets o gadgets.Estos elementos son pequeñas aplicaciones o utilidades que amplían el contenidodel blog. Podemos encontrar widgets prácticamente para todo:La ventaja de publicar un blog en una plataforma como Blogger es que millones deusuarios 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 suutilización es realmente sencilla, sin necesidad de modificar directamente el código dela plantilla del blog. Otros widgets son creados por programadores externos, pero normalmentetambién es sencilla su instalación. En esta lección conoceremos algunos de loswidgets 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 lasiguiente pantalla: 19
  20. 20. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs La ventana que aparece al pulsar en el enlace anterior muestra el conjunto dewidgets 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
  21. 21. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs 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
  22. 22. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs • Presionar guardarY ahora el blog quedo así: 22
  23. 23. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y BlogsDesde la página de Diseño, podrás cambiarlo de ubicación si así lo deseas con latécnica de "arrastrar con el ratón".Widget de comentarios recientes Para incorporar widgets "no oficiales", deberemos modificar el código de laplantilla o hacerlo a través del elemento HTML/ Javascript, donde normalmentese personaliza el widget a nuestras necesidades. Uno de los widgets más utilizados es el de los comentarios recientes. Eshabitual encontrar en una de las columnas del blog un apartado con los comentariosrecientes 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
  24. 24. Curso de Web Marketing 2012 Modulo 3 – Redes Sociales y Blogs 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

×