4. Inserta contenido multimedia.

Esta práctica consiste en subir imágenes, presentaciones y vídeos en las entradas del blog.

Los contenidos multimedia los podemos insertar por diversos procedimientos:

1. Pegando la dirección (URL) del objeto alojado en otra página.
2. Subir nuestro objeto al alojamiento de Google. Las imágenes se suben a nuestro espacio de Picasa y los vídeos se suben a YouTube.
3. Incrustar el contenido alojado en otro servicio de alojamiento gratuito mediante el código HTML. 

Crea una entrada nueva y en la barra de edición podemos encontrar los botones para insertar imagen y vídeo.

Insertar imagen y vídeo utilizando los botones del editor.

Cuando un se pulsa sobre insertar imagen o vídeo, aparece una ventana que nos muestra un menú lateral donde podemos optar por:

• Subir el contenido.
• Desde nuestro espacio de Picasa o YouTube. En caso de ser los propietarios del objeto.
• Desde Picasa o YouTube. En caso de ser imágenes o vídeos de otras personas, y siempre reconociendo la propiedad del objeto.
• Pegando la URL. En este caso depende del contenido a insertar:
• Imagen. Busca la imagen, pulsa el botón derecho del ratón y selecciona " Copiar URL de la imagen ".
• Vídeos. Copia y pega la URL de la barra de direcciones del navegador.

Insertar albumes de fotos, presentaciones y vídeo.

Los pasos a realizar son los siguientes:

1. Entra en el servicio de alojamiento correspondiente.

2. Selecciona el contenido a insertar.

3. Pulsa sobre el botón "embed" (incrustar).

4. Copia el código HTML.Vuelve al editor del blog y pulsa sobre el botón HTML. Ahora se muestra la entrada con todo el código HTML.

5. Pega el código en la zona adecuada.

6. Modifica el tamaño para que se adapte a tu plantilla del blog.

7. El tamaño se modifica cambiando los valores de las etiquetas Width (Ancho) y Height (Alto).

Ejemplo:

La imagen siguiente de la presentación está incluida en la entrada con el siguiente código:

<a href="http://2.bp.blogspot.com/-P1UzTWHTUhM/T1lQ97RVtnI/AAAAAAAAAfg/ rCKMZ2vxy5c/s1600/blog028.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="165" src="http://2.bp.blogspot.com/P1UzTWHTUhM/ T1lQ97RVtnI/AAAAAAAAAfg/rCKMZ2vxy5c/s200/blog028.jpg" width="200" />

En la parte superior del código se observa la URL o dirección web de la imagen. 

http://2.bp.blogspot.com/-P1UzTWHTUhM/T1lQ97RVtnI/AAAAAAAAAfg/ rCKMZ2vxy5c/s1600/blog028.jpg

Si se cambia el valor de right por left, cambia la alineación de la imagen de derecha a izquierda.

<a href="http://2.bp.blogspot.com/-P1UzTWHTUhM/T1lQ97RVtnI/AAAAAAAAAfg/ rCKMZ2vxy5c/s1600/blog028.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="165" src="http://2.bp.blogspot.com/P1UzTWHTUhM/ T1lQ97RVtnI/AAAAAAAAAfg/rCKMZ2vxy5c/s200/blog028.jpg" width="200" />

Si cambiamos el valor de Width="200" por Width="400"  y height="165" por

height="330" la imagen será justo el doble.

Tarea


Ejercicio 1. Imagen.

1. Crea una entrada nueva y selecciona el botón HTML.
2. Copia y pega el siguiente código.

<table style="width:auto;"><tr><td><a href="https://picasaweb.google.com/lh/photo/LwkoViGrrakgjq8iogPUeldhyqAlwa1ji6Ys3BbKS3I?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-C_chjzuKbhGepr5gk8Tqv8SHJPT6PPzng2EHA6eKvGhcbteyAT3FrlogD9x1yONGbzp38wYHi4DUvehR0xOZRnO6oU-csRmZ2w77xbyGEqkMIgQgQRb-wIBVR09QVQZcfCtRc8hwao/s800/IMG_0627.JPG" height="600" width="800" /></a></td></tr><tr><td style="font-family:arial,sans-serif; font-size:11px; text-align:right">De <a href="https://picasaweb.google.com/107010257728659465957/BlogCamarena?authuser=0&authkey=Gv1sRgCOS7xvOplc3vYQ&feat=embedwebsite">Blog Camarena</a></td></tr></table>

1. Modifica los valores de ancho y alto para centrar la imagen en la plantilla de tu blog.

Ejercicio 2. Álbum de Picasa.

1. Copia y pega el siguiente código.

<embed type="application/x-shockwave-flash" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" width="800" height="533" flashvars="host=picasaweb.google.com&hl=es&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F107010257728659465957%2Falbumid%2F5562932835550739313%3Falt%3Drss%26kind%3Dphoto%26authkey%3DGv1sRgCP-pv86JscjomQE%26hl%3Des" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

1. Modifica el tamaño del álbum de Picasa para situarlo centrado con la plantilla del blog.

Ejercicio 3. Presentación de Slideshare.

1. Copia y pega el siguiente código.

<div style="width:340px" id="__ss_11661919"> <strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/Tecnocamarena/prcticas-de-electrnica-analgica-ii" title="Prácticas de Electrónica Analógica II" target="_blank">Prácticas de Electrónica Analógica II</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/11661919" width="340" height="284" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div style="padding:5px 0 12px"> View more <a href="http://www.slideshare.net/thecroaker/death-by-powerpoint" target="_blank">PowerPoint</a> from <a href="http://www.slideshare.net/Tecnocamarena" target="_blank">Javier</a> </div> </div>

1. Modifica el tamaño de la presentación de Slideshare para situarlo centrado con la plantilla del blog.

Ejercicio 4. Vídeo de YouTube.

1. Copia y pega el siguiente código.

<iframe width="420" height="315" src="http://www.youtube.com/embed/fkKogt4Asr0" frameborder="0" allowfullscreen></iframe>

1. Modifica el tamaño del vídeo de YouTube para situarlo centrado con la plantilla del blog.

El resultado debe ser el siguiente:

De Blog Camarena

Prácticas de Electrónica Analógica II

View more PowerPoint from Javier