En Diarios de la nube ya hemos visto cómo meter una presentación en un sitio web o Blog y darle el aspecto que deseamos por medio de Google Drive y Google Docs. Ahora vamos a utilizar Slideshare por el enorme valor que tiene no sólo como lugar de almacenamiento de presentaciones de toda clase, sino como centro neurálgico en Internet de la difusión y exhibición de esta clase de contenidos.
Hay diversos ejemplos con los que aprovecharse de esta manera de exponer nuestros contenidos: Blogs de cocina que enseñan sus platos en diapositivas o cómo se hace un determinado postre paso a paso. También webs de fotografía que exhiben sus mejores creaciones a través de imágenes que se van mostrando en una presentación. Tiendas que venden un determinado artículo y presentan sus características junto a fotografías del mismo en su web, cursos explicativos de toda clase que desmenuzan sus temarios con imágenes y diagramas explicativos, infografías, anuncios, demostraciones, etc...
Descubre las posibilidades de mostrar tu información de una manera elegante y sencilla que dará dinamismo a tu web y te permitirá comunicar tus ideas de múltiples maneras.
Conceptos previos, ¿qué es una presentación?
En informática solemos aludir al término presentación cuando componemos un archivo de imágenes o textos que agrupados en diapositivas transmiten o comunican ideas e información de cualquier clase.
¿Qué es Slideshare?
SlideShare, tal como cuenta en su página web, es la comunidad más grande del mundo para compartir presentaciones. Con 60 millones de visitantes mensuales y 130 millones de páginas vistas, es uno de los 200 sitios web más visitados en el mundo. Además de las presentaciones, SlideShare también es compatible con los documentos, archivos PDF, vídeos y webinars.
Slideshare no compone o utiliza software directamente para crear la presentación. El usuario puede crearla por medio de su medio preferido (Microsoft Power Point, Adobe PDF, etc...) y posteriormente subirla y compartirla con millones de usuarios de todo el mundo por medio de Slideshare.
Así mismo, se puede utilizar publicar en una página web o Blog la presentación realizada con Slideshare para luego mostrarla dentro del mismo a los usuarios que se conectan.
Demostración de una presentación realizada con Slideshare:
Crea tu presentación con Slideshare en tres sencillos pasos. Haz "clic" en "Mostrar / Ocultar cómo se hace" para visualizar el detalle del paso con el que deseas trabajar.
1) Paso a Paso: Crear una presentación, subirla a Slideshare y meterla en nuestro sitio web o Blog.
1.1) Creando una presentación con Google Drive y Google Docs:
NOTA IMPORTANTE: Si ya tienes realizada tu presentación con Microsfot Power Point o Adobe PDF, no es necesario que realices este parte de la guía. Puedes pasar directamente al punto donde comenzamos a trabajar con Slideshare.Inicialmente solemos pensar que lo más complicado es crearse el "Gadget" de diapositivas, pero realmente lo difícil es escoger bien lo que vamos a mostrar y cómo vamos a hacerlo:
Antes de comenzar, plantéate si vas a mostrar fotos o vas a utilizar vídeos. Qué tipos de fotografía vas a utilizar, dónde vas a colocar el "Gadget", cómo quieres que se presenten:
- Tipos de fotografía a utilizar: es algo que va en gustos, debes buscar aquellas de las que, evidentemente, te sientas más orgulloso pero debes tener en cuenta también que contrasten con el fondo de tu Blog.
- Dónde vas a colocar el Gadget: Si tienes publicidad debes conseguir que no se mezcle con ella o lleve a la confusión a tus usuarios, es una norma de las política del programa ADSense a tener en cuenta. Si no tienes publicidad, igualmente es primordial decidir dónde vas a colocarlo. Los sitios ideales suelen ser los "Sidebars" (menús laterales) o el pié de página. El código que voy a proporcionarte lo podrás utilizar también en tus entradas, no sólo en la "parte externa" del Blog, por si deseas enriquecer algún artículo de una manera más visual.
- Formas de presentación: es importante elegir un buen color de fondo para la presentación que "sintonice" con los colores de nuestro Blog. Si quieres preservar la estética del lugar donde vas a colocarlo debes tener en cuenta que un componente de esta clase es muy impactante a nivel visual y puede sobrecargar en exceso un blog que ya de por sí disponga de numerosos "Gadgets". Utilízalo con "sabiduría", su uso es ideal pero debe realizarse con tino para que encaje en la estructura de tu sitio web, debe formar parte del "todo" y no ser algo accesorio que pueda "agobiar" al usuario.
UNAS SUGERENCIAS Y RECOMENDACIONES, NO TODO ES COLOCARLO EN EL "SIDEBAR" A LA IZQUIERDA O DERECHA:
- Para los blogs de fotografía los "sidebars" (barras laterales) son ideales, cuida que no tengan transiciones de cambio demasiado cortas. Es decir, si pones que los cambios entre diapositivas sean muy cortos, "estresarás" visualmente al usuario que esté visualizando contenido de tu entrada, unos 3 segundos y medio es bastante aceptable.
- En los blogs de viajes o incluso de fotografía, crearse una página accesible mediante menú con un "Álbum" de fotos con componente de diapositiva puede resultar innovador. Muy pocos blogs de esta clase están experimentando con esta clase de presentación y es interesante. El usuario puede ver diversas fotos con sus slides y si hay alguna imagen que le llama la atención hacer clic sobre ella para ponerla a pantalla completa.
- Los blogs de cocina son ideales para el uso de este componente. Pueden incluir en la entrada donde indican la receta, diversas fotos con diferentes posiciones del plato o postre sobre el que trata su artículo. El resultado es más fresco y moderno que las imágenes estáticas. Así mismo, crearse una página accesible mediante "clic" de menú donde tengamos "la carta" puede resultar estupendo.
COMPROMISO ENTRE COSNUMO DE RECURSOS EN CLIENTE Y CALIDAD VISUAL:
- En mis pruebas personales para esta guía, he pasado PageSpeed para medir el impacto en rendimiento para el usuario sin detectar ningún problema de rendimiento asociado a la carga de la página. Sin embargo, aunque descargue más o menos rápido (sobre todo una vez ha quedado cargado en la caché del navegador), si su tamaño es elevado puede impactar en la cantidad de memoria libre y recursos que le queden al usuario que lo visualice. Por ello, te recomiendo que en la página principal del blog utilices tamaños de presentación en píxeles más reducidos y que busques el compromiso exacto entre rendimiento y calidad visual para que se ejecute perfectamente en el ordenador de tus usuarios.
- Intenta que si la presentación tiene un tamaño en píxeles grande (por ejemplo la que tengo de demostración para esta entrada es grande: 590 píxeles de ancho por 480 píxeles de alto) no esté en la página principal del blog. En esa página utiliza tamaños más reducidos (unos 260 píxeles de ancho x 175 de ancho para ponerla en un sidebar está bien). Es decir, cuanto más "grande" en tamaño es la presentación, más "potencia" va a requerir del usuario donde se muestre. Suelo insistir mucho en este tema, aunque hoy día los ordenadores o Smartphones de los usuarios suelen tener mucha más potencia de la que a priori se suele pensar, es conveniente vigilar siempre que nuestro blog mantenga su velocidad y fluidez óptimas para que disfruten de una navegación de calidad.
- La velocidad de transición de diapositivas es vital también para evitar problemas de rendimiento. Intenta que sea superior a los 3 segundos por fotos, además a más velocidad puedes "estresar" al usuario que esté viendo las imágenes.
- Si aprendes a utilizar el componente que te explico en la guía adecuadamente, gozarás de una web más "viva", más interactiva sin penalizar para nada el rendimiento. El componente utilizado con precisión es una delicia visual y no ofrece problemas de velocidad en el cliente.
1.1) CREANDO LA PRESENTACIÓN
Para mostrar las imágenes o vídeos que queramos utilizar, primero debemos realizar una presentación. Para los que no estéis familiarizados con el concepto, un programa de presentación te ayuda a colocar tus imágenes en diapositivas, de manera que van mostrándose en pantalla según se va mostrando cada diapositiva.
Puedes poner tus fotografías o vídeos en un Power Point y luego importarlo en Google Drive o puedes utilizar el software de presentaciones que el propio Google Drive incorpora.
La clave del componente, es que donde lo coloquemos, mostrará en el interior de su "marco" las diapositivas de la presentación que nos vamos a montar.
Voy a explicaros cómo crearos vuestra presentación en Google Drive, es sencillísimo:
- Conéctate a Google Drive desde el buscador Google. Fíjate en el menú superior de opciones que tiene el buscador y localiza la que te marco en imagen, es la llamada Drive:
- Dentro de Drive pulsa el botón "Create" y te aparecerá una menú desplegable en el debes hacer "clic" sobre "presentation" (observa el pantallazo adjunto):
- Se te abrirá el programa de creación de presentaciones de Google. Inicialmente aparecerá con una pantalla en la que te da a elegir el tema de fondo ("Chose a Theme") con el que quieres trabajar. No es excesivamente importante puesto que vamos a superponer las imágenes por encima del fondo del tema. Sólo es importante si tenéis imágenes panorámicas (tipo 16:9) que puedan dejar "bandas negras" como las películas cuando se ven en la tele porque no ocupan toda la pantalla. Esas imágenes que de otra manera se deformarían, como deseamos preservar su aspecto, sí mostrarán el "Theme" de fondo que pongamos. Yo para la de ejemplo he seleccionado "Simple Dark" (la que tiene fondo negro).
- Una vez seleccionado el "Theme" de fondo que deseáis utilizar os aparecerá una imagen como la inferior que acompaña a este texto.
- Como no deseamos añadirle a la imagen título o subtítulo, borramos ambos componentes del área de trabajo seleccionándolos y pulsando suprimir (os muestro una imagen debajo con un ejemplo de cómo queda cuando están seleccionados):
Al pulsar suprimir quedará la diapositiva libre por completo para que podamos insertar en ella la imagen o vídeo deseado. |
- Ahora insertamos la imagen en la diapositiva. Para ello nos vamos a la opción del menú superior llamada "Insert" y en el menú desplegable que nos sale seleccionamos o "Image" o "Video".
- Si pulsas "Image" o "Video", te saldrá una pantalla para insertar la imagen o vídeo deseada:
Aquí estamos añadiendo una imagen que tengamos en el disco duro o ya subida a un álbum de Google+. |
Aquí añadimos un vídeo que tengamos subido a Youtube o que tengamos en una URL de Google Drive o similar. Podemos utilizar vídeos ya existentes en Youtube o editar uno nosotros mismos. |
- Pulsa sobre el botón "Choose an image to upload" para seleccionar una imagen de tu disco duro o soporte digital donde la tengas almacenada y subirla (parecida a como lo haces con Blogger). Si ya tienes imágenes en Blogger o Álbumes en Google+ ni te molestes en subir las imágenes, ¡ya las tienes!, simplemente selecciona la que quieras para la diapositiva:
Si pulsas "Upload" subes la imagen, si pulsas "Your Albums" entonces colocas la que quieras de tus propios Álbumes de Google+- |
Selecciona la imagen deseada con el ratón y pulsa "Select" (el botón azul de la parte inferior de la pantalla) |
- Una vez escogida la imagen te aparecerá en pantalla sobre la diapositiva:
NOTA: si la imagen no ocupa la diapositiva entera es posible que sea porque se desee preservar su relación de aspecto para que no quede deformada. Puedes de todas formas colocar el ratón sobre los "cuadraditos" laterales que le salen a la imagen en azul y manteniendo pulsado el botón izquierdo arrastrar a izquierda o derecha para agrandarla, pero no te lo recomiendo si ves que la imagen se deforma. Sea imagen o sea vídeo, el procedimiento arriba descrito es el mismo.
- ¡Por fin tenemos nuestra primera diapositiva!, ahora sólo queda pulsar el botón "+" que te indico en pantalla para añadir otra diapositiva y repetir el proceso hasta que hayamos metido todas las imágenes que queremos:
- Al igual que en los pasos anteriores, borramos "Click to add title" y "Click to add text" e insertamos siguiendo las instrucciones ya indicadas cada imagen que deseemos que forme parte de la presentación que después mostraremos en nuestro blog.
1.2) COMPARTIENDO LA PRESENTACIÓN:
Este paso es muy importante, pues aunque tengamos nuestra presentación hecha, si no la publicamos en la web no podremos utilizarla dentro del componente presentación que vamos a crear para nuestro blog. Cuando tengamos finalizada la presentación y hayamos metido todas las imágenes y/o vídeos, id al menú superior y pulsad "File" y después la opción de menú "Publish to the Web..." (tal como muestro en el "pantallazo" inferior)
Ahora selecciona "Start Publishing" y sigue las instrucciones que te comento. |
- Cuando hayas dado a publicar y después "Start publishing", te preguntará si deseas realmente compartir la presentación, pulsa aceptar si deseas compartirla o cancelar si deseas no compartirla. Después en cualquier momento podemos descompartirla o incluso borrarla de Drive sin problemas.
- Ahora es muy importante la pantalla para compartir que se muestra pues nos va a proporcionar el código que vamos a utilizar en nuestro blog para el componente de presentación:
- Desde este momento está compartida la presentación, sin embargo queda extraer el código que va a hacer que se muestre en nuestro blog dónde y cómo nosotros deseemos:
- Document Link: Es el enlace al documento en Google Drive, en este caso para lo que queremos hacer no nos es necesario.
- Embed Code: Copia el texto para poder embeber la presentación en tu blog (si es necesario déjalo pegado en el blog de notas para no perderlo.
- El resto de campos que aparecen en esta pantalla los vamos a configurar manualmente cuando insertemos la presentación en nuestro blog, así pues, podéis ahora poner el tamaño deseado (Presentation size) o el tiempo que tardará en pasarse de una diapositiva a otra (Automatically advance presentation to the next slide) o que comience al dibujarse la página (Start slideshow as soon as player loads) o que se embucle al terminar para que vuelva a empezar al llegar al final (restart slideshow after the last slide). Después cuando llevemos a blogger la presentación los editaremos manualmente, ya que hay algunos que aquí no nos sirven para saber cómo va a quedar una vez lo metamos en nuestro blog.
- Al hacer "Close" volveremos a la presentación pero ya podemos cerrar esa pestaña del navegador que contiene a Google Presentation y volver a la de Google Drive donde veremos que nuestra creación está ya disponible (si no le pusisteis nombre aparecerá como "untitled document" en el listado de archivos de Drive, si le pusisteis nombre aparecerá con él).
COMPARTIENDO LA PRESENTACIÓN DE GOOGLE DRIVE PARA SLIDESHARE:
- Si vas a mostrar tu presentación con el visor de Google Docs bastará con que copies el código "Embed" en tu página web o Blog como podremos ver unos pasos más abajo.
- Si deseas que tu presentación realizada con Google Docs se pueda mostrar en Slideshare, no te preocupes por compartirla desde Drive:
Tal como ves en la imagen superior, con la presentación abierta en Drive selecciona "Archivo" y después la opción Descargar como PDF. De esa manera harás la presentación de Google Docs compatible con Slideshare.
2) Utilizando Slideshare para publicar y compartir tu presentación en Internet:
2.1) Conéctate a Slideshare y te aparecerá en tu navegador una página como la que te muestro a continuación:
- En la barra negra superior, en el lado derecho encontrarás la palabra "Registrarse", haz "clic" en ella para darte de alta en el servicio.
2.2) Hay diversas formas de registrarse en Slideshare, puedes escoger la que mejor se adapte a tus necesidades:
- Antes de darte de alta en el servicio siempre se su documentación y políticas de uso.
- También podrás completar un registro normal, empleando una dirección de correo electrónico, un usuario y una password de acceso a la aplicación.
2.3) Para subir tu presentación creada con Microsfot Power Point o Adobe PDF (utilizada para Google Docs), lo único que tienes que hacer es pulsar el botón naranja de la barra superior negra en el que pone "Subir".
2.4) Localiza en tu disco duro la presentación y pulsa el botón "Abrir" para que suba a Slideshare.
2.5) Aparecerá una página con una barra de progreso mientras se va subiendo la presentación.
2.6 ) Al finalizar la subida, rellena el título de la presentación y una descripción del contenido de la misma para que otros usuarios puedan localizarla. Es importante que le asignes una correcta categoría para que la gente que busque información sobre esa materia pueda localizarla con facilidad.
2.7) El último paso te servirá para utilizar un código fuente que permita añadir la presentación a tu sitio wbe o Blog o compartirla por las redes sociales al instante.
Selecciona el texto de la caja "Embed code" para meter la presentación en tu sitio web o Blog.
La que he creado de demostración tiene este código fuente:
<iframe src="http://www.slideshare.net/slideshow/embed_code/27142842" width="476" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
Donde <iframe src= indica que el contenedor de la presentación en el sitio web o Blog donde se pegue este código, será un iFrame (marco interactivo) que contendrá la presentación de la ruta http://www.slideshare.net/slideshow/embed_code/2714284.
width="476" height="400": Te permiten poner un tamaño de ancho y alto para la presentación.
3) Metiendo la presentación en nuestro sitio web o Blog:
Pulsa en "Mostrar / Ocultar cómo se hace" para que se muestre el detalle del paso que te interese realizar. Comienza a crear tu presentación con Slideshare para publicarla en tu sitio web o Blog.
Si se trata de un sitio web estándar:
Simplemente añade el código fuente que extraíste en el paso 2.7 de Slideshare en la página web donde desees que se muestre la presentación.
Si se trata de Blogger:
3.1) Ahora que tenemos el código de la presentación que hemos publicado, lo vamos a personalizar y a meter en Blogger para utilizarlo a nuestro gusto:
- Dentro de Blogger, dirígete al menú izquierdo y selecciona la opción "Diseño" sobre la cual vamos a añadir nuestro "Gadget" de presentación:
- A continuación pulsa "Añadir Gadget" dentro del "lienzo de diseño" (el área azul de la pantalla central), de la lista que se muestra selecciona el "Gadget HTML/Javascript" (en la imagen inferior se encuentra justo debajo del "Gadget" que tiene como icono una lupa):
Ahora pegamos el código que extraíamos del paso 2.7), aquel que se encontraba en "Embed Code" y lo pegamos en el "Gadget HTML/Javascrip" que estamos creando:
Pegamos el código en el Gadget correspondiente y pulsamos "Guardar". |
3.2) Ahora queda realizar los ajustes pertinentes. En primer lugar , busca un sitio adecuado donde colocarlo, después vamos a retocarlo para que su tamaño y presentación se adecuen a la zona donde lo has insertado:
- Si nada más colocarlo te vas a ver cómo queda, el resultado puede ser "espantoso" dependiendo de donde lo hayas colocado. Ahora es el momento de comprender bien el código que hemos copiado para configurar el tamaño a nuestras necesidades:
<iframe src="http://www.slideshare.net/slideshow/embed_code/27142842" width="476" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
Donde <iframe src= indica que el contenedor de la presentación en el sitio web o Blog donde se pegue este código, será un iFrame (marco interactivo) que contendrá la presentación de la ruta http://www.slideshare.net/slideshow/embed_code/2714284.
width="476" height="400": Te permiten poner un tamaño de ancho y alto para la presentación.
La configuración del Tamaño en el código fuente
- width="590" height="480" : Es el ancho (width) y alto (height) que tendrá el marco que engloba a la presentación. Cuanto más grande, mayor será la presentación. Yo le he puesto un tamaño bastante elevado para ponerlo en un "sidebar", si lo colocas en un lateral ve probando hasta ajustar, con mi plantilla Blogger se centraba bien en los laterales si ponía "widht = 260" y "height = 175". Esto es variable en cada plantilla, haz tus pruebas y busca los mejores tamaños. Acuérdate que el ancho y alto que definas para el marco, influirá en cómo va a quedar la presentación, si la haces muy ancha pero muy baja quedará "achatada", si por el contrario la haces muy alta y poco ancha, quedará "alargada". Debes jugar con: dónde la colocas, el tamaño que le vas a dar para que quede bien ajustada y que dicho tamaño no deforme la imagen. Suena complicado pero es sumamente sencillo ir cambiando en el Gadget HTML/Javascript los valores, guardando y viendo cómo queda (incluso con la vista previa). A cambio, esta versatilidad te dejará que le pongas el tamaño que tú prefieras sin verte limitado a uno estándar como sucede con el "gadget" presentación que incorpora Blogger.
Ejemplo de colocación a pié de página, los tamaños utilizados en mi código fuente están pensados para localizarlo en un lugar así. Ancho a 590 y alto a 480.
Ejemplo de colocación de la presentación, alterando su valores a Ancho a 260 y alto 175 en el sidebar lateral derecho.
- Si quieres conocer los tamaños de las zonas de la página con Internet Explore o con Google Chrome (en Mozilla si tienes Firebug instalado), puedes pulsar F12 y seleccionar el pequeño icono de la "lupa", al pasarlo por encima de las superficies que desees te dirá el ancho y alto que tienen en píxeles:
- El resto de campos del código déjalos como están, permitirán que el usuario pueda poner la imagen a pantalla completa dependiendo del navegador que utilice.
Si deseas integrarlo en una Entrada:
Si quieres enriquecer una entrada con una presentación con sus fotos o vídeos, te explico cómo realizarlo:
- Simplemente, cuando accedas a la entrada pulsa sobre el botón de de la parte superior derecha de la edición de entradas en Blogger llamado "HTML" (como te muestro en el pantallazo adjunto)
- Al editar en HTML, ahora sólo tienes que copiar y pegar el código que extraíste en el paso 3). Te he resaltado en el pantallazo inferior en naranja un ejemplo de cómo en modo HTML podemos meter donde prefiramos el código fuente con el tamaño que queramos.
De esta manera sólo queda que decidas el tamaño que deseas darle e introduzcas el código fuente donde prefieras para mostrar tu presentación y enriquecer la entrada.
Si quieres meterlo en una página a parte con un opción de menú
Si quieres crearte tu "carta" de "menú" con las diferentes fotografías de tus platos, o tu "galería" de fotos de viaje, o lo que tu imaginación te dicte, pero quieres colocarlo a parte, sin que aparezca en la pantalla principal, sigue estas instrucciones:
- En el escritorio de Blogger, dirígete al menú de la izquierda y selecciona la opción "Páginas" (justo debajo de la opción "Entradas") y a continuación selecciona "Página en blanco" tal como te muestro en el pantallazo inferior:
- Al seleccionar Página en blanco te aparecerá una página de edición como la de las entradas. Dale al botón HTML e introduce el código que extraíste al publicar la presentación en Google Drive.
- Ahora ponle nombre a la página y guarda. Volverás a la parte del escritorio de Blogger que controla las páginas.
- Ya sólo queda que pulses "Publicar" en la página y después para que aparezca en el blog, selecciones o "Pestañas Principales" para que te añada un "menú" en la parte superior para elección de páginas o "Enlaces laterales" si quieres que te aparezca un menú lateral donde poder seleccionar la página. Si hiciste el menú de un sólo nivel o el de , simplemente en el código fuente que añadiste, en la URL que hace que se lancen las opciones de menú, pones la URL que Blogger ha dado a tu página con su nombre completo .HTML.
Muy buen tutorial! Claro y completo por donde lo mires. Desconocia esta tecnica de publicas slides tanto desde Drive con su "presentaciones" como con SlideShare. Me active una cuenta... y me agradó mushisimo la rapides y sencillez. Tambien me agrada la compatibilidad que diente con toda la plataforma de Blogger! Imaginoque tambien favorece al posicionamiento SEO verdad....???? Toda la descripcion que proves a una subida en SlideShare... tambien es indexada por GOOGLE? Muchas Gracias por este aporte valiosisimo!
ResponderEliminarSlideshare es una url con alto PR, con lo cual puede venir bien para el posicionamiento. Fundamentalmente es ideal para compartir con millones de usuarios la presentación y ver estadísticas, hacerla "viral", ponerla en tu web o Blog... tiene muchísimas utilidades.
EliminarEs fácil de usar, muy fácil. Va en gustos si se prefiere utilizar Google Docs y Drive o Power Point. Lo bueno de Slideshare es la enorme capacidad que posee para promocionar una presentación por todo Internet.
Me alegro que te haya gustado. Cuesta sacar tutoriales buenos todos los días y se agradece mucho tu positivo feedback.
Muchas gracias Claudio, de verdad.