1. 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

2. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
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. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
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)

4. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
1. Accediendo a guadalinfo.es::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Accedemos con nuestro nombre de usuario y clave (es obvio :) )

5. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
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

6. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
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

7. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
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

8. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
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:
<!-- Start of Flickr Badge -->
<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>
<!-- End of Flickr Badge -->
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.

9. Manual para incrustar galerías Públicas 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
<!-- Start of Flickr Badge -->
<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&sourc
e=user_set&user=45803520%40N03&set=número set&context=in%2Fset-número
set%2F"></script>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->

10. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
Código editado
<!-- Start of Flickr Badge -->
<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%2F
set-72157623000156576%2F"></script>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->
Obsérvese las diferencias ( en rojo )

11. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
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.

12. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
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.

13. Manual para incrustar galerías Públicas Flickr en Guadalinfo.es
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 que
algo está mal, si quieres, puedes enviarme un feedback (mensaje de respuesta), en los
siguientes medios:
AMSN: frangallego82@msn.com
CORREO JUNTA: guadalinfo.montejaque@andaluciajunta.es
Facebook: http://es-es.facebook.com/people/Javier-Gallego/1163888414
Twitter: http://twitter.com/javiergallego
Guadaltwitter: guadalinfo.montejaque
Skype: frangallego82
Gmail: jvigallego@gmail.com / guadalinfomontejaque.centro@gmail.com
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Fe de erratas
SI ALGO ESTUVIERE MAL, POR FAVOR CONTACTA CON MIGO,
PARA CORREGIRLO.