Iniciar sesión | Registrarse | ¿Por qué registrarse?
  • Podrás comentar las noticias con el nombre que elijas
  • Podrás subir tus noticias en soitu.es y guardarlas en tu propia página

'Slideshows' Flash para todos

Por JUAN JESÚS G. HINESTROSA (SOITU.ES)
Actualizado 30-06-2009 13:15 CET

Quedan atrás ya esos tiempos en los que había que bajar al máximo el peso a costa de la calidad de las fotos, debido al poco ancho de banda que teníamos en nuestras casas y lugares de trabajo. Sin embargo, la tónica general hoy día sigue siendo parecida, y por eso ... ¿qué tal si le devolvemos la dignidad a las fotos en internet?

Antes de comenzar, veamos de qué estamos hablando. Esto es lo que vas a poder usar libremente en tu sitio web:

Los detractores de Flash, expertos en usabilidad, de accesibilidad y en S.E.O. (posicionamiento en buscadores) podrían echarnos en cara el usar esta tecnología en lugar de HTML puro y duro, algo que funcionaría directamente en casi todos los navegadores sin necesidad de ningún plugin. Pero no lo hemos hecho así por capricho, ni porque tengamos acciones de Adobe (que no las tenemos :] ). El motivo es que se obtienen las siguientes ventajas:

Ventajas de usar slideshow.swf

1. Modo especial de pantalla completa, donde podemos contemplar cada foto en su máximo esplendor sin distracciones y destinando cada píxel a lo que de verdad importa: la foto. Esta opción combinado con lo descrito en 2., proporcionará unas fotos con una calidad pocas veces vista en internet :)

2. Varios archivos con distintas resoluciones por cada foto. Por ejemplo, a un visitante que vea el álbum en un netbook con una resolución pequeña de pantalla, le mandaremos archivos de 1024x768 píxeles ahorrando tiempo y ancho de banda. En cambio, alguien con una súper-pantalla de 24” le entregaríamos archivos de 1900x1200 píxeles.

3. Precarga en segundo plano de todas las fotos. Una vez cargada la foto solicitada, el visor cargará en segundo plano las siguientes o anteriores, dependiendo del sentido en el que estés viendo las fotos. Así no tendrás que esperar para cargar las demás.

4. Escalado de fotos con algoritmo de interpolación. Gracias a esto, las fotos no se verán pixeladas ni tendrán bordes dentados cuando el alto y el ancho real del archivo no sean exactamente el mismo que al que se está mostrando.

Vale, lo quiero usar sin complicarme mucho la vida

Antes de meternos en faena, tenemos que recordarte algo importante. Necesitas tener un sitio donde alojar todo, un servidor web donde puedas subir todos los archivos. Después de esta aclaración, vamos allá. Para hacer funcionar el álbum necesitas todos estos elementos:

  • El archivo Flash slideshow.swf.
  • El archivo HTML que contiene al anterior slideshow.html.
  • El archivo XML, slideshow.xml, donde meteremos el título del álbum, los pies, etc.
  • La carpeta o carpetas que contendrán las imágenes. Como mínimo tendrás dos, una con las fotos en grande y otra con las miniaturas. Lo ideal es que añadas varios tamaños de cada foto para adaptar la calidad a las condiciones del internauta (ver ventaja 2) en la tabla anterior.

Para que todo sea menos abstracto, en el paquete de archivos hay una galería de ejemplo con tres fotos. Sigue los pasos que hay a continuación para juguetear con tu primer álbum:

  1. Descárgate este paquete de archivos, descomprímelo y abre la carpeta ejemplos/mi_slideshow
  2. Haz doble clic en el archivo slideshow.html. Se abrirá tu navegador favorito con el álbum, echa un vistazo a las fotos, despliega las miniaturas, activa la pantalla completa, etc.
  3. Edita el archivo slideshow.xml con tu editor de texto favorito (por ejemplo, Notepad++) y observa todo lo que puedes personalizar mirando la imagen siguiente. Cambia el título, los pies de foto, etc., y observa el efecto recargando la página en el navegador que se abrió antes. Tienes toda la referencia de parámetros en el XML al final de la página.

Árbol de archivos y carpetas y correspondencia de los valores del XML con sus nombres

Para usarlo con tus fotos, sólo tienes que prepararlas con los tamaños que hayas especificado en el XML, copiarlas a las respectivas carpetas y cambiar en el archivo el título, el número de fotos y los pies de foto. Si no necesitas pies de foto, bórralos.

Sabemos que hacer varios tamaños de cada imagen es un engorro. Por eso hay aplicaciones que nos facilitarán bastante esta tarea, por ejemplo para Windows está Multiple Image Resizer. Si sabéis alguno para Mac o para Linux decidlo en los comentarios y lo añadiremos aquí.

Un vistazo a las tripas

Si te apañas programando ActionScript, controlas Adobe Flash, y necesitas modificar o mejorar en algo el comportamiento de la galería, también ponemos a tu disposición todo el código fuente con licencia Creative Commons (by-nc-nd).

Cambios estéticos

Puedes cambiar fácilmente la forma de los botones de las flechas, botones de pantalla completa y miniaturas, animación de precarga, etc. Sólo tienes que abrir el archivo .fla y hacer doble clic en cada uno de los clips que ves en el escenario. No te preocupes por la colocación, el programa los sabrá poner en su sitio.

También puedes cambiar los tipos de letra usados en el título y en los pies. Para ello abre la Biblioteca (Control+L) y busca fuentecuerpo y fuentetitulo. Haz doble clic y elige en la lista desplegable la fuente que quieras, así de fácil.

Dónde está el código

  • En el _root de la película, capa CargaXML, tienes el código fuente que carga y procesa el XML.
  • En la capa Foto hay un movieclip llamado Foto, dentro en la única capa que hay está el grueso del programa.

A continuación tienes un esquema de cómo están organizados los clips y el orden de contención de cada uno.

Jerarquía de movie-clips en el archivo .fla

Hasta dónde puedes llegar

Además de lo que hemos visto hasta ahora, puedes especificar más opciones en el XML. Tienes todas las opciones posibles en la siguiente tabla.

Referencia completa de parámetros en el archivo XML
parámetro (en amarillo obligatorios) valores posibles [valor por defecto] descripción ejemplo
titulo cadena de texto Título de la gráfica Fotos de la Amazonia
tamanos secuencia de números Nombre de las carpetas que contendrán los distintos tamaños de cada foto. Es conveniente que las nombres en función del ancho en píxeles de las fotos que contengan. 600,800,1000
nombrearchivo cadena de texto Nombre base del archivo. foto (los archivos serían: foto1.jpg, foto2.jpg, etc)
numerofotos número entero Número de fotos 5
ruta cadena de texto Ruta (path) a donde están las carpetas de imágenes /albumes/amazonia/
fotos > foto > pie cadena de texto Pie de foto Esta foto muestra todo lo que hay que enseñar.
fotos > foto > firma cadena de texto Firma de la foto Agencia EFE
opciones > colorfondo número hexadecimal [0x000000] Color del fondo. Si no sabes cómo obtenerlo, usa jscolor 0x000000
opciones > colortinta número hexadecimal [0xFFFFFF] Color del texto y de los botones. Si no sabes cómo obtenerlo, usa jscolor 0xFFFFFF
opciones > aparicionsuave 0 (desactivado) ó 1 (activado) [0] Activa la aparición de cada foto con un fundido desde el color de fondo. 0
opciones > miniaturasvisiblesinicio 0 (desactivado) ó 1 (activado) [0] Muestra el índice de miniaturas desplegado al cargar el álbum 1
opciones > miniaturasactivadas 0 (desactivado) ó 1 (activado) [1] Activa o desactiva las miniaturas 1
opciones > opcionpantallacompleta 0 (desactivado) ó 1 (activado) [1] Activa o desactiva la posibilidad de entrar a pantalla completa 1
opciones > miniaturasancho número entero [150] Ancho con el que se mostrará cada miniatura 150
opciones > miniaturasalto número entero [150] Alto con el que se mostrará cada miniatura 120
tamanofuentetitulopantallanormal número entero [26] Tamaño en píxeles de la fuente usado para el título en la vista normal 22
tamanofuentetitulopantallacompleta número entero [30] Tamaño en píxeles de la fuente usado para el título en la vista de pantalla completa 32
tamanofuentepiepantallanormal número entero [12] Tamaño en píxeles del pie usado para el título en la vista normal 12
tamanofuentepiepantallacompleta número entero [18] Tamaño en píxeles del pie usado para el título en la vista de pantalla completa 18
margenes > superior número entero [50] Tamaño en píxeles del margen desde el borde superior del álbum hasta el borde superior de la foto 60
margenes > inferior número entero [70] Tamaño en píxeles del margen desde el borde inferior del álbum hasta el borde inferior de la foto 60
margenes > izquierda número entero [35] Tamaño en píxeles del margen desde el borde izquierdo del álbum hasta el borde izquierdo de la foto 40
margenes > derecha número entero [35] Tamaño en píxeles del margen desde el borde derecho del álbum hasta el borde derecho de la foto 40

Correspondencia de los campos XML con los elementos del álbum

Ejemplo de XML con todas las opciones

<?xml version="1.0" encoding="UTF-8" ?>
<slideshow>
<titulo>Título del álbum de fotos</titulo>
<ruta>http://www.miweb.com/ruta/los/archivos/</ruta>
<nombrearchivo>foto</nombrearchivo>
<tamanos>
<horizontales>650,1280,1600,1900</horizontales>
</tamanos>
<numerofotos>9</numerofotos>

<opciones>
<colorfondo>0x000000</colorfondo>
<colortinta>0xFFFFFF</colortinta>

<tamanofuentetitulo>25</tamanofuentetitulo>
<tamanofuentepiepantallanormal>12</tamanofuentepiepantallanormal>
<tamanofuentepiepantallacompleta>18</tamanofuentepiepantallacompleta>
<aparicionsuave>0</aparicionsuave>
<miniaturasvisiblesinicio>1</miniaturasvisiblesinicio>
<avisopantallacompleta>1</avisopantallacompleta>
<miniaturasactivadas>1</miniaturasactivadas>
<opcionpantallacompleta>1</opcionpantallacompleta>
<precargasegundoplano>1</precargasegundoplano>
<miniaturasancho>200</miniaturasancho>
<miniaturasalto>160</miniaturasalto>
</opciones>
<margenes>
<superior>50</superior>
<inferior>30</inferior>
<izquierda>30</izquierda>
<derecha>30</derecha>
</margenes>

<fotos>

<foto>
<firma>Ramón Pérez</firma>
<pie> Pie de texto de la foto 1</pie>
</foto>

<foto>
<firma>Ana Gómez</firma>
<pie> Pie de texto de la foto 2</pie>
</foto>
</fotos>

</slideshow>

Nada más, esperamos que te sea de utilidad, y si tienes alguna pregunta, corrección u observación, hazlo en los comentarios. También nos encantaría que, si lo usas en tu sitio, nos lo digas en los comentarios y nos pases el enlace.

Descarga de código fuente
slideshow_soitu_es_v1.0.zip 30-Jun-2009 13:30 1,04 MB

Di lo que quieras

Aceptar

Si quieres firmar tus comentarios, regístrate o inicia sesión »

En este espacio aparecerán los comentarios a los que hagas referencia. Por ejemplo, si escribes "comentario nº 3" en la caja de la izquierda, podrás ver el contenido de ese comentario aquí. Así te aseguras de que tu referencia es la correcta. No se permite código HTML en los comentarios.

DI LO QUE QUIERAS

Lo sentimos, no puedes comentar esta noticia si no eres un usuario registrado y has iniciado sesión.
Si quieres, puedes registrarte o, si ya lo estás, iniciar sesión ahora.

Nuestra selección

Hasta la vista y gracias

Soitu.es se despide 22 meses después de iniciar su andadura en la Red. Con tristeza pero con mucha gratitud a todos vosotros.

El suplicio (o no) de viajar en tren en EEUU

Fuimos a EEUU a probar su tren. Aquí están las conclusiones. Mal, mal...

Presidimos la UE: que no falten los regalos para los periodistas

Algunos países ven esta práctica más cerca del soborno.

Soitu.es vuelve a ganar el premio de la ONA

A la 'excelencia general' entre los medios grandes en lengua no inglesa.

Tecnología
18:23

Políticos con iPad »

Para bien o para mal, el iPad se ha convertido en un habitual en muchas conversaciones. Ya sea para romper el hielo antes de una reunión o con el café en una comida familiar: defensores y detractores del aparato de Apple salen por doquier. ¿Es para tanto? ¿Vale la pena hacerse con uno? ¿No hace lo mismo que un ordenador?

En: E-Campany@

Recomendación: Albert Medrán

17:21

en La Casa Blanca libera código »

La Administración de Obama sigue dando ejemplo de apertura tecnológica al resto de los gobiernos del mundo: si una de sus banderas es la apertura de datos, ahora te toca al código fuente de módulos de Drupal Traducir »

En: radar.oreilly.com

Recomendación: Raúl Rivero

13:31

en infografia El imparable crecimiento de Internet »

En la BBC han hecho un gráfico impresionante sobre la evolución de Internet entre 1998 y 2008. Visto en elblogsalmon.com Traducir »

En: bbc.co.uk

Recomendación: mami

Estos son nuestros Selectores »

Lo más visto
1

Cómo sellar el paro por internet

RAMÓN PECO (SOITU.ES)
2

Sexo oral para ella

M. PÉREZ, J. J. BORRÁS Y X. ZUBIETA (SOITU.ES)
4

¿Qué es el sexo?

M. PÉREZ, J.J. BORRÁS y X. ZUBIETA (SOITU.ES)
5

Cómo masturbarse adecuadamente

M. PÉREZ, J. J. BORRÁS Y X. ZUBIETA (SOITU.ES)
Widgets

Widget Liga 0910

Clasificación, calendario, equipos, etc. »

Widget El tiempo

Situación actual y previsión de cinco días »

Widget Estaciones de esquí

Estado de las estaciones de esquí »

Widget Loterías y Sorteos

ONCE, Quiniela, Primitiva, etc. »

[Premio ONA a la excelencia en webs de habla no inglesa] [Premio al mejor diseño en internet y a la innovación]