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:
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.
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:
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:
Á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í.
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).
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.
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
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.
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
<?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.
slideshow_soitu_es_v1.0.zip | 30-Jun-2009 13:30 | 1,04 MB |
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.
Soitu.es se despide 22 meses después de iniciar su andadura en la Red. Con tristeza pero con mucha gratitud a todos vosotros.
Fuimos a EEUU a probar su tren. Aquí están las conclusiones. Mal, mal...
Algunos países ven esta práctica más cerca del soborno.
A la 'excelencia general' entre los medios grandes en lengua no inglesa.
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
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
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
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.