Professional Documents
Culture Documents
Integracin
Contenido
Imagen II (Integracin) .................................................................................................................. 3 Objetivos ................................................................................................................................... 3 Flickr: galera de fotos ............................................................................................................... 4 Subir fotografas a Flickr ........................................................................................................ 5 Organizar en lbumes ........................................................................................................... 8 Publicacin de una imagen Flickr en el blog ......................................................................... 9 Publicacin de presentacin Flickr en Blogger.................................................................... 14 Publicacin de presentacin Flickr en Wordpress .............................................................. 17 Picasa Web, lbums de fotos .................................................................................................. 19 Subir fotografas a Picasa Web I .......................................................................................... 21 Subir fotografas a Picasa Web II ......................................................................................... 24 Publicacin de una imagen Picasa en el blog ...................................................................... 32 Publicacin de presentacin Picasa en Blogger .................................................................. 37 Publicacin de presentacin Picasa en Wordpress ............................................................. 40 Slide.com: presentaciones de fotos ........................................................................................ 42 Crear una presentacin Slide .............................................................................................. 42 Publicar la presentacin Slide en Blogger ........................................................................... 47 Publicar la presentacin Slide en Wordpress ...................................................................... 49 Slideshare: presentaciones en lnea .................................................................................... 52 Subir una presentacin a Slideshare.net............................................................................. 52 Publicar un Slideshare en Blogger ....................................................................................... 55 Publicar un Slideshare en Wordpress ................................................................................. 58 Google Maps ........................................................................................................................... 60 Crear un mapa en GMap ..................................................................................................... 60 Publicar un mapa Google en Blogger .................................................................................. 64 Publicar un mapa Google en Wordpress............................................................................. 67 Actividades .............................................................................................................................. 70
Imagen II (Integracin)
Existen mltiples servicios Web 2.0 que permiten crear una cuenta de usuario para subir tus fotografas. Estas imgenes se pueden organizar por albumes, asociarles etiquetas para facilitar su bsqueda, compartirlas con los dems, geolocalizarlas en un mapa de Google Maps, crear presentaciones o animaciones que las muestren, etc, etc. Flickr o Picasa, entre otros, son espacios que ofrecen todas estas prestaciones. Adems es posible integrar y mostrar en las entradas de tu blog las imgenes que se encuentren alojadas en estos sitios.
Objetivos
Objetivo general Integrar en el blog imgenes a partir de archivos grficos propios o ajenoa alojados en un servicio Web 2.0 como Flickr, Picasa, Slide.com, etc. Objetivos especficos
Crear una cuenta en Flickr o Picasa para subir las imgenes de tu cmara digital organizndolas en lbumes. Integrar en tu blog una imagen o presentacin de imgenes alojadas en Flickr o Picasa. Disear una presentacin de fotografas en Slide.com aadiendo estilos grficos y transiciones adecuados a la temtica. Mostrar una presentacin de imgenes de Slide.com en una entrada de tu blog. Subir a una cuenta personal en SlideShare.net una presentacin de diapositivas elaborada previamente con Powerpoint u OpenOffice Impress para compartirla con los dems. Embeber en una entrada de tu blog una presentacin propia o ajena alojada en Slideshare.net Crear un mapa Google Maps que contenga algunos marcadores con ttulo, texto, imagen y enlace. Enlazar o embeber un mapa personalizado de GMaps en una entrada de tu blog.
Requisitos previos
Para abordar este mdulo con ciertas garantas es necesario dominar previamente las siguientes competencias:
Utilizar un navegador web para localizar informacin en internet utilizando un buscador como Google. Descargar y organizar en una carpeta del equipo imgenes obtenidas de Internet o de una cmara digital. Disear una presentacin bsica con OpenOffice Impress o Microsoft Powerpoint.
Subir fotos. Puedes hacerlo desde tu equipo, envindolas por correo electrnico o utilizando el telfono mvil con su cmara. Organizar. Clasifica las fotos en colecciones o lbumes. A cada imagen se le puede asignar una etiqueta para facilitar su bsqueda. Compartir. Utiliza grupos y controles de privacidad para compartir tus fotos. Mapas. Sobre un mapa de Google Maps se puede geolocalizar el lugar donde se tom cada foto y compartirlo con los dems. Publicaciones. Puedes elaborar tarjetas, albumes, marcos, etc utilizando las imgenes subidas. Mantenerse en contacto. Para enviar y recibir informacin sobre las actualizaciones de fotografas de familiares y amigos.
La exploracin de todas las posibilidades de Flickr excede el propsito de estos materiales. Se propone centrarse en la utilizacin de estas imgenes en lnea en los artculos de tu blog. Tambin admite la subida de vdeos pero esta prestacin no se cita. Para utilizar Flickr es necesario disponer de una cuenta en Yahoo. Desde la portada de Flickr se puede crear una pulsando en el botn Crear tu cuenta.
Descarga y descomprime el archivo gallery.zip a una carpeta del equipo. Como resultado de esta tarea se obtendr una coleccin de fotografas para ser subidas a Flickr. Abre Mozilla Firefox y visita la web de Flickr en la URL: http://www.flickr.com. Clic en el enlace Iniciar sesin e introduce tus credenciales Yahoo. Desde la portada selecciona T > Cargar fotos y vdeos
En el cuadro de dilogo Seleccione los archivos ... despliega la lista Buscar en: para situarte en la carpeta galera anteriormente descargada y descomprimida. Clic en la primera imagen, mantn pulsada la tecla Mayus y sin soltar haz clic en la ltima imagen. De esta forma seleccionars todas las imgenes. Clic en el botn Abrir.
Se muestra un cuadro de dilogo donde aparecen seleccionadas las fotos elegidas. Si pulsas en Agregar ms podrs aadir ms a este listado.
Puedes decidir si las fotos sern Pblicas (opcin recomendada y por defecto) o bien Privadas.
Para continuar pulsa en el botn Cargar fotos y vdeos. Transcurridos unos minutos se mostrar el mensaje de xito en la subida y un enlace de acceso para aadir descripciones a las fotos. Si haces clic en l se mostrar una pgina donde es posible definir para cada una: ttulo, descripcin y etiquetas.
Los datos que ya existen para cada imagen fueron generados por Flickr a partir de los metadatos contenidos en el archivo de cada imagen subida. En esta pgina es posible modificarlos. Para terminar no olvides pulsar en el botn Guardar situado en la parte ms inferior de la pgina. Las fotos estarn disponibles en la opcin de men: Tu > Tu galera.
Nota:
Otra opcin para subir fotos es utilizar el Uploader bsico cuyo enlace de acceso se ofrece desde la pgina Cargar fotos y vdeos
Organizar en lbumes
Si no ests autentificado debes hacer clic en el enlace Iniciar sesin e introduce tus credenciales Yahoo. Desde el men superior horizontal haz clic en la opcin Organizar. Tras unos segundos de carga se mostrar el organizador de Flickr.
Clic en la pestaa lbumes y luego en el enlace Crear nuevo lbum. Desde el panel de nuevo album:
Introduce el ttulo del lbum, p.e.: "Mi viaje por Asturias". Para aadir fotografas a este nuevo lbum debes arrastrar las imgenes que aparecen en la franja inferior al panel derecho superior. Arrastra una imagen del lbum al cuadrado visor que aparece sobre el ttulo. Esta ser la imagen que represente el albm. Pulsa en el botn Guardar.
Si no ests autentificado debes hacer clic en el enlace Iniciar sesin e introduce tus credenciales Yahoo. Desde la pgina Tus fotos selecciona una imagen haciendo clic sobre ella para visualizarla en solitario. Por ejemplo, sobre la foto del Faro de Cudillero.
Haz clic derecho sobre la fotografa y selecciona la opcin Copiar la ruta de la imagen. Esta accin copiar al portapapeles la URL absoluta a la imagen almacenada en tu cuenta de Flickr.
Accede a Blogger (http://www.blogger.com) e introduce tus credenciales de la cuenta Google. Desde el Escritorio haz clic en el botn Nueva entrada. Aade como ttulo: Faro de Cudillero En el editor de artculos pulsa en el botn Aadir imagen.
10
En el cuadro de dilogo Blogger: Subir imgenes, en el apartado Aadir una imagen de la web, haz clic derecho sobre el cuadro de texto URL y selecciona Pegar.
Esta tarea pegar la URL absoluta de la imagen. Elige un diseo de alineacin (Ninguno) y un tamao de imagen (Grande) y haz clic en el botn SUBIR IMAGEN. Al cabo de unos segundos se mostrar en la Vista preliminar y un mensaje de que se ha aadido su imagen. Clic en el botn FINALIZADO.
Pulsa la tecla Enter para situarte debajo de la imagen y copia y pega el siguiente texto descriptivo:
Conocido como "El guardin del vrtigo", el faro de Cudillero se asienta en la Punta Roballera sobre un acantilado a ms de 75 m. sobre el nivel del mar. Situado al este del puerto pesquero se accede a l gracias a un camino peatonal. Con ms de un siglo de existencia ha experimentado distintas reformas algunas de las cuales fueron en su momento reivindicadas por los lugareos en el cancionero popular: ""El faro de Cudillero lo van a poner ms alto, pa que alumbre a los marinos y no se pierdan los barcos".
11
Clic en el botn PUBLICAR Para ver el aspecto del artculo haz clic en el enlace Ver Blog.
ENTRADA.
Nota: El procedimiento descrito se puede utilizar para mostrar en un artculo del blog cualquier imagen que encontremos en Internet. Basta con hacer clic derecho sobre ella en el navegador web para elegir la opcin Copiar la ruta de la imagen. De esta forma dispondremos de su URL absoluta para luego aadirla en nuestro artculo del blog siguiendo los pasos explicados.
En el cuadro de dilogo haz clic en la pestaa Desde una URL. Clic derecho sobre el cuadro URL de la imagen y selecciona Pegar.
12
Introduce como Texto alternativo en este caso: Faro de Cudillero. Pulsa en el botn Insertar en la entrada
Pulsa la tecla Enter para situarte debajo de la imagen y copia y pega el siguiente texto descriptivo: Conocido como "El guardin del vrtigo", el faro de Cudillero se asienta en la Punta Roballera sobre un acantilado a ms de 75 m. sobre el nivel del mar. Situado al este del puerto pesquero se accede a l gracias a un camino peatonal. Con ms de un siglo de existencia ha experimentado distintas reformas algunas de las cuales fueron en su momento reivindicadas por los lugareos en el cancionero popular: ""El faro de Cudillero lo van a poner ms alto, pa que alumbre a los marinos y no se pierdan los barcos".
Clic en el botn Publicar. Para ver el aspecto del artculo haz clic en el enlace Vista previa
13
Nota:
El procedimiento descrito se puede utilizar para mostrar en un artculo del blog cualquier imagen que encontremos en Internet. Basta con hacer clic derecho sobre ella en el navegador web para elegir la opcin Copiar la ruta de la imagen. De esta forma dispondremos de su URL absoluta para luego aadirla en nuestro artculo del blog siguiendo los pasos explicados.
Si no ests autentificado en Flickr debes hacer clic en el enlace Iniciar sesin e introduce tus credenciales Yahoo. En la barra de mens de Flickr selecciona T > Tus lbumes.
A continuacin haz clic sobre el lbum creado anteriormente. Una vez dentro del lbum observa que existe un enlace con el texto Presentacin. Si se hace clic en este enlace se mostrar una presentacin con la secuencia de fotografas que forman parte del lbum.
Durante la visualizacin de la presentacin haz clic en el enlace Compartir situado en la esquina superior derecha de la presentacin. Esta accin mostrar el cuadro Compartir esta presentacin.
14
Existen dos formas de integrar una presentacin de fotos de Flickr en una pgina de tu blog:
Opcion A Marco interno: Utilizando una etiqueta iframe (marco interno) que apunte a la direccin URL de esa presentacin. Opcin B Visor de Flash. Utilizando el objeto de Flash con el visor que ofrece el propio servidor Flickr.
Opcin A Marco interno: En el cuadro de texto Seleccionar la direccin URL: haz clic en el botn Copiar en el portapapeles. Opcin B Visor de Flash. En el cuadro de texto Seleccionar el cdigo HTML pulsa en el botn Copiar en el portapapeles.
15
Accede a Blogger (http://www.blogger.com) e introduce tus credenciales de la cuenta Google. Desde el Escritorio haz clic en el botn Nueva entrada. Aade como ttulo: Mis viajes por Asturias En el editor haz clic en el enlace Edicin de HTML para mostrar el cdigo HTML del artculo.
Haz clic derecho sobre el cuadro de texto del editor y elige Pegar. Si has optado por la opcin A Marco interno en el cuadro de dilogo Insertar HTML debes crear un marco interno (IFRAME) que apunte a esta URL absoluta que hemos pegado. Para ello escribe:
<iframe src="<url>" width="400" height="300"> </iframe> donde <url> es la direccin entre comillas que hemos copiado. Los atributos width y height definen el tamao del marco interno.
Si has optado por la opcin B Visor de Flash y ya has pegado el cdigo <object ...> no ser necesario hacer nada ms.
16
Si no ests autentificado en Flickr debes hacer clic en el enlace Iniciar sesin e introduce tus credenciales Yahoo. En la barra de mens de Flickr selecciona T > Tus lbumes.
A continuacin haz clic sobre el album creado anteriormente. Una vez dentro del lbum observa que existe un enlace con el texto Presentacin. Si se hace clic en este enlace se mostrar una presentacin con la secuencia de fotografas que forman parte del lbum.
17
Durante la visualizacin de la presentacin haz clic en el enlace Compartir situado en la esquina superior derecha de la presentacin. Esta accin mostrar el cuadro Compartir esta presentacin.
En el cuadro de texto Seleccionar la direccin URL pulsa en el botn Copiar en el portapapeles. Wordpress NO permite copiar y pegar cdigo HTML del tipo iframe o bien object/embed por razones de seguridad. Por este motivo vamos a crear un enlace en el artculo a la direccin o URL de la presentacin de imgenes en Flickr. Accede al interfaz de administracin de Wordpress y elige Entradas > Aadir. Introduce como ttulo: Mis viajes por Asturias. Teclea el texto: "Ver presentacin de fotografas". Selecciona este texto y pulsa en el botn Insertar/Editar enlace del editor.
18
Haz clic derecho sobre el cuadro de texto URL del enlace y elige Pegar. Introduce como Ttulo, por ejemplo, Mis viajes por Asturias.
Clic en el botn Insertar. De regreso a la edicin del artculo haz clic en el botn Publicar. Pulsa en el enlace Ver entrada para comprobar cmo se visualiza el artculo y la presentacin de fotografas.
Subir fotos en lnea. Puedes hacerlo desde tu equipo utilizando el programa instalado Picasa o bien desde el navegador web o incluso envindolas por correo electrnico. Organizar. Clasifica las fotos en lbumes. A cada imagen se le pueden asignar etiquetas para facilitar su bsqueda. Compartir. Es posible compartir tus fotos con todo el mundo, slo con los amigos que desees o mantenerlas en privado. Picasa incorpora la posibilidad de asociar una licencia Creative Commons a cada foto o lbum indicando las condiciones de uso. Mapas. La integracin con Google Maps y Google Earth facilitan aadir a tus fotos informacin de su ubicacin geogrfica y verlas en el mapa. Sincronizacin. Picasa y Albumes web de Picasa pueden trabajar de forma sincronizada para garantizar que los cambios realizados en tu equipo se reflejan tambin en los lbumes online.
En un principio hemos de distinguir claramente entre Picasa que es el software que se instala en el equipo para manejar y editar nuestros archivos de fotos en local y por otra parte Picasa Web que es la aplicacin web que nos permite almacenarlas en un servidor remoto para compartirlas con los dems. La exploracin de todas las posibilidades de ambas aplicaciones excede el propsito de este material. Por ello se propone incidir especialmente en la integracin de estas imgenes en lnea en los artculos de tu blog. Para utilizar Picasa Web es necesario disponer de una cuenta en Google. Si ya dispones de credenciales para tu blog de Blogger conviene que utlices las mismas. Existen dos formas alternativas para acceder a Picasa Web:
Visita la URL de Picasa Web: http://picasaweb.google.com/ e introduce tus credenciales Google. Visita la URL de de Blogger: http:///www.blogger.com e introduce tus credenciales Google. A continuacin haz clic en Mi cuenta y luego en Albumes Picasa Web.
Al entrar por primera vez a Picasa Web y haber realizado los ejercicios del mdulo de Blogs con Blogger vers que ya dispones de algunas fotos subidas en tu cuenta. Esto es debido a que cuando subes imgenes en los artculos de tu blog en Blogger, stas se guardan automticamente en un lbum de Picasa Web con el nombre asignado al blog. Desde Picasa Web puedes administrar estas fotos pero hazlo con cautela porque si eliminas una fotografa desde aqu puede ocurrir que sta no se vea luego en el correspondiente artculo de tu blog.
20
A continuacin se explica el procedimiento para subir fotos a tu cuenta de Picasa Web utilizando el navegador web. Descarga y descomprime el archivo gallery.zip a una carpeta del equipo. Como resultado de esta tarea se obtendr una coleccin de las fotos. Visita la web de Picasa Web en la URL: http://picasaweb.google.com/ e introduce tus credenciales Google. Se muestra una pgina con los lbumes que ya tenemos en Picasa Web. Vamos a subir todas las imgenes a un lbum independiente. Clic en el botn Subir.
En el cuadro de dilogo Subir fotos puedes seleccionar un lbum existente o crear uno nuevo. Para elegir uno haz clic en la entrada correspondiente y pulsa en el botn Seleccionar lbum. En este caso se propone crear un lbum nuevo. Para ello haz clic en el enlace crea uno nuevo.
21
Clic en la opcin Pblico en el apartado de Visibilidad para este lbum. Para terminar haz clic en el botn Continuar. Selecciona cada archivo de imagen pulsando en el botn Examinar... y localizando cada uno de los archivos obtenidos del ZIP anterior. Puedes subir hasta 5 imgenes en cada intento.
22
Observa que en la columna derecha se muestran los lmites de subida: 500 fotos por lbum y un espacio mximo total de 1 GB (1024 MB) para todos los lbumes subidos.
Clic en el botn Iniciar subida. Transcurridos unos instantes se mostrar una pgina con las fotos subidas en el nuevo lbum. Repite los pasos anteriores para subir el resto de imgenes pero ahora eligiendo el mismo lbum.
Dentro del lbum se pueden editar algunos de sus parmetros en el men Editar:
Ministerio de Educacin. ITE |Multimedia y Web 2.0 23
Propiedades del lbum. Permite modificar el ttulo, fecha de creacin, visualizacin pblica o privada, etc. que se ha establecido al crear el lbum. Tapa del lbum. Ofrece la posibilidad de elegir la imagen que representar al lbum en el listado de lbumes. Mapa del lbum. Se accede a un mapa Google donde es posible situar cada una de las fotos. Ttulos. Si deseas modificar el ttulo descriptivo que acompaa a cada imagen. Eliminar lbum. Para eliminar el lbum y liberar el espacio ocupado en el servidor. Organizar y cambiar orden. Esta opcin da paso a un interfaz que permite redefinir el orden secuencial en que se mostrarn las fotos mediante "arrastrar y colocar".
Clic en el botn Presentacin de diapositivas para ver una proyeccin que muestra la secuencia de fotos contenidas en el lbum.
En este apartado vamos a explicar el procedimiento para crear un lbum y subir las imgenes a Picasa Web desde tu equipo utilizando el programa Picasa 3.
Ministerio de Educacin. ITE |Multimedia y Web 2.0 24
25
Si no es as elige Archivo > Aadir carpeta a Picasa. En el Administrador de carpetas localiza y selecciona la carpeta fauna en el listado de carpetas y en la columna derecha activa la opcin Explorar una vez o bien Explorar siempre. Pulsa en el botn Aceptar.
En la seccin Carpetas se mostrar una nueva carpeta con el nombre fauna y al hacer clic sobre ella, en el panel derecho se mostrarn las imgenes que contiene.
En la columna de Carpetas haz clic derecho sobre el nombre de esta carpeta y elige la opcin Seleccionar todas las imgenes.
Ministerio de Educacin. ITE |Multimedia y Web 2.0 26
En la esquina inferior izquierda se mostrar la coleccin de miniaturas correspondiente a la seleccin de fotos realizada. Clic en el botn de lbumes que se muestra y selecciona Nuevo lbum.
En el cuadro del dilogo Propiedades del lbum introduce como Nombre el siguiente: Fauna africana y haz clic en el botn Aceptar.
27
Tras esta accin se habr creado una entrada en la columna de lbumes disponibles.
Para subir este lbum haz clic derecho sobre l y elige la opcin Subir a los lbumes web ...
28
Introduce las credenciales de acceso a tu cuenta en Picasa Web y pulsa en el botn Acceder.
29
Se crea el nuevo lbum en Picasa Web y se ofrecen, entre otros, los siguientes parmetros de configuracin: a. Tamao para subir. En este caso vamos a elegir Pequeo: 640 pxeles (blogs y pginas web) porque ser el destino final de publicacin de algunas de estas imgenes. b. Visibilidad para este lbum. En este caso elegiremos Pblico.
30
Clic en el botn Subir. Se inicia un proceso de subida progresiva de las distintas imgenes que se muestra en el Administrador de subidas.
31
Al finalizar el proceso con xito se mostrar un mensaje de proceso finalizado. Clic en el botn Ver online y cierra la ventana del Administrador de subidas.
Se abrir el navegador web configurado por defecto en el equipo mostrando esta galera subida a Picasa Web. Cuando una imagen ha sido subida del equipo local a Picasa Web en su vista previa en Picasa 3 se mostrar un icono de una flecha verde apuntando hacia arriba para indicar esta circunstancia.
32
Selecciona una imagen del lbum haciendo clic sobre ella para visualizarla en solitario. Por ejemplo, sobre la foto del buitre. Se puede obtener la URL absoluta de la fotografa mediante clic derecho sobre la fotografa y seleccionando la opcin Copiar la ruta de la imagen. Esta accin copiar al portapapeles la URL absoluta a la imagen almacenada en tu cuenta de Flickr. El principal inconveniente es que quizs esta imagen sea muy grande para incrustar en un artculo de tu blog.
Otra posibilidad es utilizar la URL de embed que se ofrece en la columna derecha donde se muestra la imagen. Esta opcin nos permitir elegir el tamao de la imagen que deseamos utilizar en nuestro blog. Para ello haz clic en Enlace a esta foto. Despliega el combo Seleccionar tamao para elegir un tamao, por ejemplo, de 400 pxeles.
33
Clic sobre el cuadro de texto Incrustar imagen para seleccionar todo el cdigo HTML que se ofrece. A continuacin haz clic derecho y elige Copiar. Abre el Bloc de Notas y elige Edicin > Pegar. Esta accin pegar el cdigo completo en un documento para su posterior manipulacin. Aunque se podra pegar completo en el cdigo HTML de un artculo, en este caso nos vamos a quedar nicamente con la URL absoluta a la imagen en el tamao seleccionado.
Selecciona la URL a la imagen que viene a continuacin de la etiqueta <img src="... Es la direccin que est entre comillas pero sin incluirlas. A continuacin elige Edicin > Copiar.
34
En el cuadro de dilogo Blogger: Subir imgenes, en el apartado Aadir una imagen de la web, haz clic derecho sobre el cuadro de texto URL y selecciona Pegar.
Esta tarea pegar la URL absoluta de la imagen. Elige un diseo de alineacin (Ninguno) y un tamao de imagen (Grande) y haz clic en el botn SUBIR IMAGEN. Al cabo de unos segundos se mostrar en la Vista preliminar y un mensaje de que se ha aadido su imagen. Clic en el botn FINALIZADO.
Pulsa la tecla Enter para situarte debajo de la imagen y copia y pega el siguiente texto descriptivo: Los buitres son aves rapaces que suelen alimentarse nicamente de animales muertos, aunque a falta de estos, son capaces de cazar piezas vivas. Los buitres se encuentran distribuidos por todos los continentes, excepto la Antrtida y Oceana. Son de gran tamao y estn adaptados para volar a gran altura.
35
Clic en el botn PUBLICAR Para ver el aspecto del artculo haz clic en el enlace Ver Blog.
ENTRADA.
En el cuadro de dilogo Aadir una imagen, haz clic en la pestaa Desde una URL. Haz clic derecho sobre el cuadro de texto URL de la imagen y selecciona Pegar.
Pulsa la tecla Enter para situarte debajo de la imagen y copia y pega el siguiente texto descriptivo: Los buitres son aves rapaces que suelen alimentarse nicamente de animales muertos, aunque a falta de estos, son capaces de cazar piezas vivas. Los buitres se encuentran distribuidos por todos los continentes, excepto la Antrtida y Oceana. Son de gran tamao y estn adaptados para volar a gran altura.
Clic en el botn Para ver el aspecto del artculo haz clic en el enlace Ver Entrada. Publicacin de presentacin Picasa en Blogger Publicar.
Si no ests autentificado en Picasa Web (http://picasaweb.google.com/) debes introducir tus credenciales Google y pulsar en el botn Acceder. Al acceder autentificado se mostrar la pgina Mis fotos donde son accesibles los lbumes que tenemos subidos al servidor. Clic sobre el lbum Fauna africana creado con anterioridad para abrirlo.
37
Una vez dentro del lbum haz clic en Enlazar a este lbum. Se mostrar los enlaces para enviar por correo electrnico o para embeber en tu blog una imagen con un enlace al lbum en Picasa Web.
Clic en el enlace Incrustar proyeccin de diapositivas. Se muestra el cuadro de dilogo Crear una presentacin de diapositivas.
Elige como tamao de la presentacin Grande 400 px. y marca las opciones Mostrar ttulos y Reproducir automticamente. Selecciona el cdigo HTML mediante clic derecho y elegir Seleccionar todo. De nuevo haz clic derecho para elegir Copiar. Accede a Blogger (http://www.blogger.com) e introduce tus credenciales de la cuenta Google. Desde el Escritorio haz clic en el botn Nueva entrada. Aade como ttulo: Fauna africana En el editor haz clic en el enlace Edicin de HTML para mostrar el cdigo HTML del artculo.
38
Haz clic derecho sobre el cuadro de texto del editor y elige Pegar.
39
Si no ests autentificado en Picasa Web (http://picasaweb.google.com/) debes introducir tus credenciales Google y pulsar en el botn Acceder. Al acceder autentificado se mostrar la pgina Mis fotos donde son accesibles los lbumes que tenemos subidos al servidor. Clic sobre el lbum Fauna africana creado con anterioridad para abrirlo.
Una vez dentro del lbum haz clic en Enlazar a este lbum. Se mostrar los enlaces para enviar por correo electrnico o para embeber en tu blog una imagen con un enlace al lbum en Picasa Web.
Selecciona el cdigo HTML que se ofrece en la casilla Copiar el HTML para inscrustarlo en el sitio web. Haz clic derecho y elige Seleccionar todo. De nuevo haz clic derecho para elegir Copiar.
Ministerio de Educacin. ITE |Multimedia y Web 2.0 40
Accede al interfaz de gestin de contenidos y selecciona Entradas > Aadir para crear un nuevo artculo. Aade como ttulo: Fauna africana Clic en el pestaa HTML para acceder al cdigo HTML de la entrada.
Haz clic derecho sobre el cuadro de texto del editor y elige Pegar.
41
Descarga y descomprime el archivo gallery.zip en una carpeta del disco duro. Como resultado de esta tarea dispondrs de una coleccin de fotografas para crear tu presentacin. Otra posibilidad es utilizar una coleccin propia. Abre el navegador web Firefox y visita la web de Slide.com: http://www.slide.com Se puede crear una presentacin sin necesidad de registrarse como usuario de este servicio. Sin embargo conviene registrarse haciendo clic en el enlace
Ministerio de Educacin. ITE |Multimedia y Web 2.0 42
Regstrate para poder editar en cualquier momento las presentaciones creadas. Para ello introduce tu email y la contrasea. Una vez completado el registro, en el formulario ENTRAR introduce estos datos para autentificarte. Clic en el botn Crear un Slide Show o bien en ingls Make a Slide Show.
En la pestaa Mis archivos haz clic en el botn Busca para subir las imgenes desde el equipo.
En el cuadro de dilogo Seleccione los archivos ... navega para situarte dentro de la carpeta anterior. Puedes seleccionar un solo archivo con hacer clic sobre l. Para aadir, uno a uno, a la seleccin pulsa previamente la tecla Ctrl y sin soltarla vete haciendo clic sobre los archivos que deseas elegir. Para aadir una lista de archivos: haz clic en el primero, pulsa la tecla Mayus y sin soltarla haz clic en el ltimo. Vers que se seleccionan todos. Utiliza este truco para elegir todos los archivos de imagen de esta carpeta.
43
Clic en el botn Abrir. Transcurridos unos segundos se habrn subido estas imgenes al servidor remoto. Una vez finalizado el proceso se mostrar el mensaje Subida terminada. En la vista previa de la presentacin que se muestra en la parte superior de la pgina ya aparecen estas imgenes. En el panel inferior donde se muestran las imgenes subidas se puede realizar los siguientes ajustes:
Nombre de Slide Show: Mi viaje por Asturias Pies de foto: Escribe el pie de pgina para cada fotografa ya que por defecto se sita el nombre del archivo. Orden de las fotografas. Arrastra las imgenes para colocarlas en el orden en que se mostrarn. Azar. Si activas esta casilla las fotos se mostrarn de forma aleatoria.
Estilo, Temas y Skins: puedes combinar las distintas opciones de estos parmetros para conseguir presentaciones ms personalizadas. En la pestaa Estilo se puede activar la casilla Azar para que se muestre cada vez con un
44
estilo aleatorio y desplegar la lista Rapidez para elegir la velocidad de la animacin: Fast, Medium y Show (Rpido, Medio y Lento).
Msica: permite elegir una msica de fondo entre un amplio repertorio de melodas. Si desactivas la casilla Toca automticamente en Slide Show la msica no sonar hasta que el usuario efecte clic sobre el icono del altavoz.
45
Fondo: para elegir un color de fondo. Efectos: para aplicar efectos de sepia, blanco/negro, etc a las fotos. Tamao: en funcin del modelo definido para el estilo se podr elegir un tamao estndar: small, medium o large (pequeo, mediano y grande).
Privacidad: permite establecer si la presentacin ser de acceso pblico o particular. Se recomienda la opcin de acceso pblico.
46
Si no te has registrado y autentificado Slide.com te ofrece la oportunidad de registrarte. Si continuas sin registrar no ser posible editar ms adelante el slide creado. En este caso no es necesario por lo que pulsa el botn Continuar para seguir. Al final vers la presentacin de tus fotos con los parmetros de estilo, audio y animacin definidos.
Atencin: No cierres el navegador web para poder realizar el prximo apartado de publicacin en tu blog.
En la pgina Compartir Slide Show que aparece una vez has creado la presentacin de fotos en Slide.com se muestra el cdigo de integracin HTML de la presentacin para los distintos formatos de blog. Clic en la pestaa Blogger. Haz clic en el contenido del cuadro Copia este cdigo. Observa que se selecciona el cdigo completo. Una vez seleccionado este texto haz clic derecho sobre este cuadro y elige Copiar en el men contextual que se muestra. Tambin se puede copiar mediante la combinacin de teclas Ctrl + C
47
Accede a Blogger (http://www.blogger.com) e introduce tus credenciales de la cuenta Google. Desde el Escritorio haz clic en el botn Nueva entrada. Aade como ttulo: Mi presentacin Slide En el editor haz clic en el enlace Edicin de HTML para mostrar el cdigo HTML del artculo.
Haz clic derecho sobre el cuadro de texto del editor y elige Pegar.
48
En la pgina Compartir Slide Show que aparece una vez has creado la presentacin de fotos en Slide.com se muestra el cdigo de integracin HTML de la presentacin para los distintos formatos de blog.
Haz clic en el contenido del cuadro Copia este cdigo. Observa que se selecciona el cdigo completo. Una vez seleccionado este texto haz clic derecho sobre este cuadro y elige Copiar en el men contextual que se
49
muestra. Tambin se puede copiar mediante la combinacin de teclas Ctrl + C Abre el Bloc de Notas y sobre l elige Edicin > Pegar.
Selecciona el cdigo numrico que identifica al slide de fotos. Es el valor numrico del parmetro channel o bien id. A continuacin en la barra de mens selecciona Edicin > Copiar.
Al final del documento del bloc de notas teclea el siguiente cdigo: [slideshow id=&w=426&h=320]
A continuacin del parmetro id en este cdigo pega el valor numrico copiado anteriormente y correspondiente a tu slideshow. El resultado final ser del tipo: Ministerio de Educacin. ITE |Multimedia y Web 2.0 50
[slideshow id=144115188096768696&w=426&h=320] Selecciona esta etiqueta [slideshow ...] y en el bloc de notas elige Edicin > Copiar. En el interfaz de gestin de Wordpress elige Entradas > Aadir para crear un nuevo artculo. Aade como ttulo: Mi presentacin Slide Con la pestaa Visual seleccionada, haz clic derecho sobre el cuadro de texto del editor y elige Pegar.
Clic en el botn Publicar. Pulsa en el enlace Ver entrada para comprobar cmo se visualiza la presentacin.
51
Slideshare (http://www.Slideshare.net) es un servicio de alojamiento y publicacin en lnea de presentaciones realizadas con herramientas como Powerpoint u OpenOffice. Puedes utilizarlo para subir tus presentaciones y compartirlas. Tambin puedes buscar y utilizar las realizadas por otras personas. En este material se propone Slideshare como una interesante opcin para publicar en la web nuestras propias presentaciones y luego poder integrarlas en el cdigo HTML de una pgina de tu blog. Conviene registrarse previamente para crear tu cuenta en Slideshare. Para ello haz clic en el enlace Signup y completa el formulario indicando email, usuario y contrasea. A partir de ese momento ya dispones de credenciales de identificacin y acceso.
Subir una presentacin a Slideshare.net
Descarga y descomprime el archivo TIC_project.zip en el disco duro de tu equipo. Como resultado de esta tarea obtendrs el archivo TIC_project.ppt que contiene una presentacin realizada en PowerPoint. Abre el navegador y visita la pgina de Slideshare: http://www.Slideshare.net En el cuadro de Login introduce las credenciales de acceso. Clic en el enlace Upload (Subir).
52
En la pgina se muestra informacin sobre el tipo de archivos que se pueden subir: .ppt, .pps, .pptx, .ppsx (Powerpoint), .odp (Impress de OpenOffice), .pdf o bien documentos de Office 97-2003-2007 (.doc, .rtf y .xls) u OpenOffice (.odt, .ods u .pdf). Actualmente el lmite mximo es 100 MB.
Clic en el botn Browse and select files ... (Navegar y elegir archivos ...). En el cuadro de dilogo Seleccione los archivos ... navega para situarte en la carpeta donde has descargado y descomprimido el archivo TIC_project.ppt.
53
Seleccinalo y pulsa en el botn Abrir. Tras unos segundos de espera se subir esta presentacin en Slideshare. Cuando el proceso de subida ha tenido xito se solicitan algunos datos adicionales:
Title (Ttulo). Es el ttulo de la presentacin. Ejemplo: Proyecto TIC en un centro educativo Tags (Etiquetas). Es una relacin de palabras-clave separadas por espacios en blanco que permitirn localizar esta presentacin utilizando la herramienta de bsqueda de Slideshare. Ejemplo: TIC proyecto integracion educacion tecnologias Language (Idioma). Selecciona la opcin Spanish (Espaol). Description (Descripcin). Un breve comentario que a modo de introduccin permite describir la presentacin. Allow file download. (Permitir descarga de archivo). Si marcas esta opcin los usuario podrn descargarse el archivo original.
Para concluir el proceso de subida pulsa en el botn Publish. Tras pulsar este botn se produce otro tiempo de espera. Slideshare est transformando el archivo original en una pelcula Flash que se mostrar al usuario mostrando el contenido de esa presentacin. Clic en el enlace superior My Slidespace.
Clic en la imagen que muestra la presentacin que acabamos de subir. De esta forma se accede a la visualizacin de esta presentacin.
54
Notas:
Recuerda que las transiciones de diapositivas, efectos animados, audios y vdeos introducidos en la presentacin original se pierden cuando la subes a Slideshare.net. Una vez subida la presentacin se ofrece la posibilidad de aadir un audio MP3 a la presentacin para crear un SlideCast donde audio e imagen se muestran sincronizados. El audio debe estar alojado en un servidor web. Tambin se ofrece la posibilidad de insertar vdeos de Youtube.
Haz clic derecho sobre el cuadro de texto Embed (embebido) para elegir Seleccionar todo. Vuelve a hacer clic derecho sobre el cuadro de texto y elige la opcin Copiar.
55
Accede a Blogger (http://www.blogger.com) e introduce tus credenciales de la cuenta Google. Desde el Escritorio haz clic en el botn Nueva entrada. Aade como ttulo: Mi presentacin Slideshare En el editor haz clic en el enlace Edicin de HTML para mostrar el cdigo HTML del artculo.
Haz clic derecho sobre el cuadro de texto del editor y elige Pegar.
56
Nota:
Esta integracin HTML tambin se puede realizar con presentaciones publicadas por otras personas. Al situarse en su pgina tambin se ofrece el cdigo Embed para copiar y pegar en nuestra pgina web.
57
Haz clic en el botn More options (Ms opciones) que aparece en la parte derecha del cuadro de texto que contiene el cdigo Embed.
Se muestra el cdigo para Wordpress.com en la casilla for WordPress.com. Haz clic derecho en este cuadro de texto y selecciona la opcin Copiar.
58
Desde el interfaz de gestin de contenidos de tu blog en Wordpress elige la opcin Entradas > Aadir. Aade como ttulo: Mi presentacin Slideshare En el editor haz clic en la pestaa Visual y a continuacin clic derecho sobre el cuadro del editor para pegar el cdigo de SlideShare.
Haz clic en el botn Publicar. Haz clic en el botn Ver entrada para comprobar cmo se visualiza la presentacin.
59
Nota:
Esta integracin HTML tambin se puede realizar con presentaciones publicadas por otras personas. Al situarse en su pgina tambin se ofrece el cdigo para copiar y pegar en las entradas de nuestro blog.
Google Maps
Google Maps (http://maps.google.es/) proporciona herramientas para la integracin de mapas geogrficos en nuestro sitio web o blog. De esta forma es posible proporcionar a los lectores de nuestro blog un mapa con la ubicacin de centros de inters referenciados. Bsicamente consiste en aadir al mapa una capa con sealadores, textos, imgenes, enlaces, etc. Estas prestaciones son susceptibles de aplicarse a mltiples contextos educativos, culturales, empresariales, etc donde sea interesante la tcnica de geolocalizacin de recursos multimedia: visitas, itinerarios, noticias, proyectos, fotografas, etc.
Crear un mapa en GMap
60
Clic en el enlace Acceder situado en la esquina superior derecha. Introduce las mismas credenciales (usuario y contrasea) que utilizas habitualmente para Blogger.
Para situar un marcador sobre el mapa es necesario autentificarse previamente. Si ya lo has hecho pulsa en el enlace Mis Mapas.
61
Utiliza el buscador y las opciones de zoom y navegacin del mapa para situarte en el mapa de la zona que deseas mostrar. Por ejemplo: la pennsula ibrica. Elige como vista el modo Satlite. En la columna izquierda del nuevo mapa introduce el Ttulo y la Descripcin. Asegrate de que est marcada la opcin Pblico para que el recurso sea accesible por cualquier usuario.
Descarga y descomprime el archivo gmaps.zip. Como resultado obtendrs un archivo de texto gmaps.txt. Haz doble clic sobre l para abrirlo con el Bloc de Notas. En l se proporciona ttulo, descripcin e imagen de algunos de los
Ministerio de Educacin. ITE |Multimedia y Web 2.0 62
monumentos ms importantes de Espaa. Puedes seleccionar otros si lo estimas conveniente. Regresa al mapa de Google y haz clic en el botn Aadir un marcador de posicin y a continuacin haz clic en el punto del mapa donde desees situarlo. Por ejemplo: Coloca un alfiler en Barcelona.
Se mostrar un recuadro para introducir los datos del marcador. Activa el modo Texto enriquecido para facilitar la insercin de imgenes. En la casilla Ttulo introduce el ttulo del marcador, p.e. Sagrada Familia y en Descripcin copia y pega el texto descriptivo de este monumento contenido en el archivo de texto descargado. Clic en el botn Aadir imagen y en el cuadro Introduce la URL de la imagen copia y pega la URL absoluta a la imagen contenida en el archivo de texto. Para terminar la edicin de las propiedades de este marcador pulsa en el botn Aceptar.
63
Repite los pasos anteriores para situar el resto de marcadores contenidos en el documento de texto: La Giralda (Sevilla), la Alhambra (Granada), El Escorial (San Lorenzo de El Escorial) y la Catedral de Santiago. Observa que los marcadores que se van aadiendo aparecen en la parte inferior de la columna izquierda del mapa. Una vez que hayas terminado el mapa haz clic en el enlace Guardar y luego en el enlace Listo.
Tras pulsar en Listo se visualizar el mapa tal y como lo ver un visitante. Puedes navegar por l y comprobar si la informacin que se muestra en los distintos marcadores es correcta y se visualiza adecuadamente al pulsar sobre cada uno de los marcadores. Para cambiar algn dato sera necesario pulsar en el botn Editar.
Pulsa en el botn Enlazar que se muestra en la esquina superior derecha del mapa. En el cuadro que aparece se ofrece en primer lugar un enlace directo a este mapa en Google Maps. Esta direccin se puede copiar (clic
Ministerio de Educacin. ITE |Multimedia y Web 2.0 64
derecho+Seleccionar todo y clic derecho+Copiar) y pegar (clic derecho+Pegar) sobre el cuerpo de un mensaje de correo electrnico para enviarlo a otros usuarios y compartir con ellos este mapa. Para insertar el mapa en un artculo del blog hay que copiar el cdigo que se ofrece en el cuadro Pegar HTML para insertar en sitio web. Para ello haz clic derecho sobre este cuadro y elige Seleccionar todo. Despus haz clic derecho y elige la opcin Copiar.
Accede a Blogger (http://www.blogger.com) e introduce tus credenciales de la cuenta Google. Desde el Escritorio haz clic en el botn Nueva entrada. Aade como ttulo: Mi mapa Google En el editor haz clic en el enlace Edicin de HTML para mostrar el cdigo HTML del artculo.
Haz clic derecho sobre el cuadro de texto del editor y elige Pegar.
65
Pulsa en el enlace Ver blog para comprobar cmo se visualiza el mapa Google.
66
Pulsa en el botn Enlazar que se muestra en la esquina superior derecha del mapa. En el cuadro que aparece se ofrece en primer lugar un enlace directo a este mapa en Google Maps. Esta direccin se puede copiar (clic derecho+Seleccionar todo y clic derecho+Copiar) y pegar (clic derecho+Pegar) sobre el cuerpo de un mensaje de correo electrnico para enviarlo a otros usuarios y compartir con ellos este mapa. Para insertar el mapa en un artculo del blog hay que copiar el cdigo que se ofrece en el cuadro Pegar HTML para insertar en sitio web. Para ello haz clic derecho sobre este cuadro y elige Seleccionar todo. Despus haz clic derecho y elige la opcin Copiar.
67
Accede al interfaz de gestin de contenidos de Wordpress y elige la opcin Entradas > Aadir para crear un nuevo artculo. Aade como ttulo: Mi mapa Google En el editor haz clic en la pestaa HTML para mostrar el cdigo HTML del artculo
Haz clic derecho sobre el cuadro de texto del editor y elige Pegar. Observa que se pega una etiqueta de cdigo HTML iframe. Wordpress no admite esta etiqueta al guardar el artculo por motivos de seguridad. Sin embargo cuando se guarda el artculo y se publica, el sistema transformar esta etiqueta en otra del tipo [googlemaps ...] que insertar el mapa deseado en la entrada actual.
68
Clic en el botn Publicar. Pulsa en el enlace Ver entrada para comprobar cmo se visualiza el mapa Google.
69
Actividades
Actividad 1: Subir fotografas a Flickr
Crea una cuenta en Yahoo (https://login.yahoo.com/config/login?.intl=es) si no dispones de ella y utiliza estas credenciales para subir a Flickr (http://www.flickr.com/) una coleccin de fotografas obtenidas de la cmara digital o descargadas de Internet.
Actividad 2: Albumes en Flickr Tras subir las fotografas a tu cuenta de Flickr organiza las mismas creando un album o coleccin.
Crea una entrada en tu blog que incorpore una imagen alojada en tu cuenta de Flickr. Integra una presentacin de imgenes de Flickr en una entrada de tu blog.
Actividad 4: Subir fotografas a Picasa Web Crea una cuenta en Google (https://www.google.com/accounts/Login?hl=es) si no dispones de ella y utiliza estas credenciales para subir a Picasa Web (http://picasaweb.google.com/home?hl=es) una coleccin de fotografas obtenidas de la cmara digital o descargadas de Internet.
Actividad 5: Integracin de Picasa Web en tu blog Obtn el cdigo embed o enlace a una presentacin de imgenes que tengas guardadas en Picasa Web para integrarla en una entrada de tu blog.
70
Sigue las instrucciones del material para crear una presentacin Slide.com (http://www.slide.com/) a partir de una coleccin de fotografas extradas de la cmara digital o descargadas del Banco de imgenes del ITE. Incorpora efectos de transicin, fondos,audios y animaciones personalizados. Copia y pega el cdigo embed/enlace para integrar esta presentacin Slide.com en una entrada de tu blog.
Disea una presentacin de diapositivas sobre un tema educativo que resulte de tu inters. Puedes utilizar Microsoft Powerpoint o bien OpenOffice Impress. Crea una cuenta en SlideShare.net (http://www.slideshare.net/) y sube tu presentacin. Obtn el cdigo embed para insertar en una entrada de tu blog el visor de slideshare que muestra esta presentacin.
Utiliza tu cuenta como usuario Google para disear un mapa de Google Maps sobre una regin geogrfica concreta. Sita varios marcadores sobre puntos de inters de la zona aadiendo en cada uno: ttulo, texto, imagen y enlace. Localiza el cdigo embed correspondiente a esa mapa para insertarlo en una entrada de tu blog.
71