Manual Flickr para incrustar galerías en Guadalinfo.es

Manual para incrustar galerías Públicas Flickr en Guadalinfo.es

Guía para incrustar galerías de flickr públicas en Guadalinfo.es

Francisco Javier Gallego Orellana

Ed.1 V.1.1 Año 2009


A tener en cuenta::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

A quien va dirigido: Dinamizadoras/es Locales Centros Guadalinfo.

Ámbito de uso: Personal y profesional.

Qué se explica: Como insertar galerías Flickr no propias en cualquier web.

Curva de aprendizaje nivel: Medio.

Nivel de conocimientos previos del software: No necesarios.

En este manual se asume que:- Quien lee, dispone de cuenta de usuario en yahoo (http://yahoo.com)- Quien lee, dispone de acceso de usuario en flickr (http://flickr.com)

Aunque ambas opciones no son necesarias. :)

Quien debería leerlo: Cualquier persona interesada

Tiempo de aprendizaje: aproximadamente 15 minutos.

Medios necesarios: Conexión a internet, editor de texto plano (gedit)

Tipo de Licencia: Creative Commons 3.0


3, 2, 1, Comenzamos!::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Este manual asume, que el usuario sabe dónde, cómo y qué pasos hay que seguir para dar de alta una galería de imágenes flickr en Guadalinfo.es, en el caso de que no se tenga un conocimiento previo se recomienda ver con anterioridad el manual de usuario disponible aquí.

Esta guía muestra de forma gráfica y paso a paso cómo se puede insertar cualquier galería, que esté en modo público, de Flickr Web, en Guadalinfo.es.

Los medios que emplearemos serán:

- Navegador- Editor de texto plano (aunque cualquier procesador de textos sirve)

http://www.guadalinfo.es/ficha_slideshare.php?id_objeto=536


1. Accediendo a guadalinfo.es::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Accedemos con nuestro nombre de usuario y clave (es obvio :) )


2. Accediendo a Flickr::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Una vez abierta la web, en una nueva pestaña, abriremos flickr web (http://www.flickr.com/explore/). En el campo buscar, pondremos un criterio a elegir, por ejemplo; Málaga.

Pantalla de búsqueda de galerías


Buscaremos las imágenes que más nos interese, y que esté para vista pública, una vez realizada la selección, obtendremos la siguiente pantalla. Por ejemplo; Málaga

Hay que modificar la url para acceder a los sets del usuario


Cuando pinchamos sobre la imagen, nos mostrará una pantalla imágenes públicas del autor, pero deberemos de acceder a sus set(s), para ello, modificamos la url

Tan solo hay que, eliminar el número de referencia y añadir "/sets" (sin las comillas)

De esta manera accedemos a los sets públicos

Pinchamos en alguno cualquiera, y veremos esta dirección url:

El número que aparece, es número set, que necesitaremos para incrustar la galería.

Copiaremos el número que aparece después de sets/número set/, en este ejemplo sería el número 72157604040675861

3. Comienza lo bueno::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Como todos sabemos, debemos de copiar un código para que este incruste la galería en Guadalinfo.es, lo mejor es que, el código que demos de incrustar y que proporciona flickr a través del badge cuando somos los dueños de la galería, es que es "STANDARD", por lo que haciendo una serie de modificaciones, incrustaremos dicha galería en la web.

El código en cuestión es el siguiente:

<style type="text/css">#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}#flickr_icon_td {padding:0 5px 0 0 !important;}.flickr_badge_image {text-align:center !important;}.flickr_badge_image img {border: 1px solid black !important;}#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}#flickr_badge_uber_wrapper a:hover,#flickr_badge_uber_wrapper a:link,#flickr_badge_uber_wrapper a:active,#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}</style><table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=t&layout=v&source=user_set&user=45803520%40N03&set=número set&context=in%2Fset-número set%2F"></script></table></td></tr></table>

Explicamos los nombres marcados en rojo de la ventana superior:● Número set: Es la dirección web en la cual está la galería, por ejemplo:

http://www.flickr.com/photos/mbenitez/sets/72157604040675861/ (en negrita)

UNA VEZ REALIZADOS LOS CAMBIOS QUE CONSIDEREMOS EN EL CÓDIGO, INCRUSTAREMOS CUALQUIER GALERÍA, PÚBLICA DE FLICKR EN GUADALINFO.ES.

EJEMPLO PRÁCTICO VISUAL:

Antes de comenzar deberemos tener el código anterior ya creado en un archivo en blanco en el escritorio, o el cualquier lugar del sistema que esté a buen recaudo.

Copiamos el código expuesto en el cuadro anterior, abrimos un editor de texto plano (gedit), o writer, aunque recomiendo trabajar mejor con gedit.

Una vez copiado el código lo editamos, como se ha explicado anteriormente, cambiando lo que está en rojo.Es decir:Código por editar, cambiamos lo que está en rojo

<style type="text/css">#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}#flickr_icon_td {padding:0 5px 0 0 !important;}.flickr_badge_image {text-align:center !important;}.flickr_badge_image img {border: 1px solid black !important;}#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}#flickr_badge_uber_wrapper a:hover,#flickr_badge_uber_wrapper a:link,#flickr_badge_uber_wrapper a:active,#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}</style><table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=t&layout=v&source=user_set&user=45803520%40N03&set=número set&context=in%2Fset-número set%2F"></script></table></td></tr></table>

Código editado

<style type="text/css">#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}#flickr_icon_td {padding:0 5px 0 0 !important;}.flickr_badge_image {text-align:center !important;}.flickr_badge_image img {border: 1px solid black !important;}#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}#flickr_badge_uber_wrapper a:hover,#flickr_badge_uber_wrapper a:link,#flickr_badge_uber_wrapper a:active,#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}</style><table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=t&layout=v&source=user_set&user=45803520%40N03&set=72157623000156576&context=in%2Fset-72157623000156576%2F"></script></table></td></tr></table>

Obsérvese las diferencias ( en rojo )


Una vez realizados los cambios vamos a dar de alta la galería:

Pantalla para alta de galerías Picasa

Rellenamos los datos, y en código Picasa, pegamos el código que hemos editado con gedit.

Mensaje de alta correcta de galería, pulsamos sobre Gestión de galerías picasa (a la derecha)

Accederemos a todas las galerías dadas de alta en nuestra sección. Como se puede observar, vemos que tenemos la nueva galería.


Comprobamos de que funciona, haciendo click sobre la imágen de la galería.

Si todo sale bien, ACCEDERÁ A LA GALERÍA QUE HEMOS BUSCADO ANTERIORMENTE.


Feedbacks, dudas, sugerencias, fé de erratas:::::::::::::::::::::::::::::::::::::::::::::::::::::::

Gracias por leer este tutorial, espero que la comprensión del mismo haya sido de tu agrado y gusto, y que te sea útil para ponerlo en marcha :).

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Feedbacks, dudas, sugerencias

Si te ha gustado este tutorial, o tienes alguna duda, o caso de éxito o no, o si detectas quealgo está mal, si quieres, puedes enviarme un feedback (mensaje de respuesta), en lossiguientes medios:AMSN: [email protected] JUNTA: [email protected]: http://es-es.facebook.com/people/Javier-Gallego/1163888414Twitter: http://twitter.com/javiergallegoGuadaltwitter: guadalinfo.montejaqueSkype: frangallego82Gmail: [email protected] / [email protected]

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Fe de erratas

SI ALGO ESTUVIERE MAL, POR FAVOR CONTACTA CON MIGO, PARA CORREGIRLO.

Manual Flickr para incrustar galerías en Guadalinfo.es

Education

Transcript of Manual Flickr para incrustar galerías en Guadalinfo.es