15/11/11

Crear un slideshow de fotografías con jQuery


Hoy en día, que los navegadores web están desbancando cada vez más a la tecnología Flash, sobretodo los dispositivos móviles como iOS, es necesario crear presentaciones de fotos que puedan ser visualizadas sin esa tecnología. Aunque es necesario que esos navegadores tengan habilitado JavaScript, el daño es virtualmente menor que en un slideshow Flash, aunque las posibilidades creativas son, evidentemente, menores.

Descargar los archivos de Slideshow (v1.0.0)

Lo primero que tenemos que hacer es crear un archivo HTML (slideshow.html) con el siguiente código:

<html>
    <head>
         <link href="css/slideshow.css" rel="stylesheet" type="text/css" />
         <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
         <script type="text/javascript" language="javascript" src="js/slideshow.js"></script>
    </head>
 
    <body>
        <div id="slideshow">
            <div class="img" id="img-0" style="z-index:0;">
                <img src="img/img01.jpg" width="700" height="250" />
            </div>
         
            <div class="img" id="img-1" style="z-index:10;">
                <img src="img/img02.jpg" width="700" height="250" />
            </div>
         
            <div class="img" id="img-2" style="z-index:20;">
                <img src="img/img03.jpg" width="700" height="250" />
            </div>
         
            <div class="img" id="img-3" style="z-index:30;">
                <img src="img/img04.jpg" width="700" height="250" />
            </div>
         
            <div id="rapidlinks-btns">
                <div class="rapidlink-selected" id="rapidlink-0">
                    <a href="javascript:userChangeRapidLink('0');">
                        <img height="10" src="gui/blank.png" width="10" />
                    </a>
                </div>
             
                <div class="rapidlink" id="rapidlink-1">
                    <a href="javascript:userChangeRapidLink('1');">
                        <img height="10" src="gui/blank.png" width="10" />
                    </a>
                </div>
             
                <div class="rapidlink" id="rapidlink-2">
                    <a href="javascript:userChangeRapidLink('2');">
                        <img height="10" src="gui/blank.png" width="10" />
                    </a>
                </div>
             
                <div class="rapidlink" id="rapidlink-3">
                    <a href="javascript:userChangeRapidLink('3');">
                        <img height="10" src="gui/blank.png" width="10" />
                    </a>
                </div>
            </div>
        </div>
    <body>
<html>


Una vez tenemos el archivo html, creamos el archivo de estilos CSS (css/slideshow.css):

#slideshow {
    width:700px;
    height:250px;
    position:absolute;
    top:0px;
    left:0px;
}

#slideshow .img {
    width:100%;
    height:100%;
    position:absolute;
    visibility:hidden;
    top:0px;
    left:0px;
    float:left;
}

#slideshow #rapidlinks-btns {
    /* this.width:
    numRapidlinks x (.rapidlink.width + .rapidlink.marginRight + 2xrapidlink.borderWidth) */

    width:68px;
    height:15px;
 
    /* this.left:
    #slideshow.width - this.width */

    left:632px;
    top:233px;
    position:absolute;
    z-index:500;
    float:right;
}

#slideshow #rapidlinks-btns .rapidlink,
#slideshow #rapidlinks-btns .rapidlink-selected {
    width:10px;
    height:10px;
    border:1px solid #FFFFFF;
    float:left;
    margin-right:5px;
}

#slideshow #rapidlinks-btns .rapidlink:hover,
#slideshow #rapidlinks-btns .rapidlink-selected {
    background-color:#FFFFFF;
}

#rapidlinks-btns .rapidlink a,
#rapidlinks-btns .rapidlink-selected a,
#rapidlinks-btns .rapidlink a img,
#rapidlinks-btns .rapidlink-selected a img {
    text-decoration:none;
    border:none;
}


Y, finalmente, vamos a la parte interesante, que son los métodos JavaScript (js/slideshow.js):

<script language="javascript" type="text/javascript">
function changeRapidLink() {
    rapidLinkAnterior = rapidLinkActual;
    if(rapidLinkActual < totalRapidLinks-1) {
        rapidLinkActual++;
    } else {
        rapidLinkActual = 0;
    }
    animateChangeRapidLink();
}

function animateChangeRapidLink() {
    $(imgDIV+rapidLinkAnterior).fadeTo(secsOfTrans*1000,0,function() { evalRapidLinks(); });
}

function evalRapidLinks() {
    $(imgDIV+rapidLinkActual).fadeTo(secsOfTrans*1000,1);
    $(rapidLnkDIV+rapidLinkAnterior).attr("class","rapidlink");
    $(rapidLnkDIV+rapidLinkActual).attr("class","rapidlink-selected");
}

function initRapidLinks() {
    if(totalRapidLinks > 0) animationInterval = setInterval("changeRapidLink()",secsOfDelay*1000);
}

function userChangeRapidLink(selectedRapidLink) {
    rapidLinkAnterior = rapidLinkActual;
    rapidLinkActual = selectedRapidLink;
   
    clearInterval(animationInterval);
    animationInterval = setInterval("changeRapidLink()",secsOfDelay*1000);
    animateChangeRapidLink();
}

function initItem() {
    itemsLoaded++;
    if(itemsLoaded == totalRapidLinks) {
        $(imgDIV+rapidLinkActual).fadeTo(secsOfTrans*1000,1,function() { initRapidLinks(); });
    }
}

var secsOfDelay = 5;
var secsOfTrans = 1;
var contDIV = "#slideshow";
var imgDIV = contDIV+" #img-";
var rapidLnkDIV = contDIV+" #rapidlinks-btns #rapidlink-";

var animationInterval;
var rapidLinkAnterior = 0;
var rapidLinkActual = 0;
var totalRapidLinks = 4;
var itemsLoaded = 0;

$(imgDIV+rapidLinkActual).ready(function() {
    for(var i = 0;i < totalRapidLinks;i++) {
        $(imgDIV+i).fadeTo(1,0,function() {
            $(this).css("visibility","visible");
            initItem();
        });
    }
});
</script>

Los efectos de escoger un buen título para tus fotografías

Parecerá una tontería de las que hacen historia, pero escoger un buen título para tus fotografías puede hacer que estas tengan muchas más visitas que tus mejores fotos. Basten un par de ejemplos.

En algunos de nuestros viajes a Egipto me llevé el trípode porque sabía que iríamos a ver el espectáculo de luz y sonido de Giza. Saqué muchas fotos, algunas bastante aceptables, entre ellas estas dos:

Observatorio astronómico
Observatorio astronómico. Subida a Flickr el 29-10-2010. Visualizaciones: 487

De cómo los extraterrestres construyeron las pirámides. Subida a Flickr el 29-10-2010. Visualizaciones: 712


Cómo podéis apreciar, subí las fotos a Flickr el mismo día, así que es un caso ideal para poder comparar.

La primera imagen, combinación de 2 fotografías (una para el cielo y otra para el resto) es, según mi opinión, una de mis mejores fotografías nocturnas, tanto a nivel expositivo como compositivo. Y más aún si tenemos en cuenta que no se sacaron en formato RAW. Por el orgullo de "padre", la colgué en varios foros de fotografía, con el afán de mejorarla y llevarla a otro nivel. La imagen original tenía un cadenado y unas luces residuales en la pirámide de la derecha (Keops) que convenientemente eliminé. En resumen: estoy muy orgulloso de ella.

La segunda imagen, está tal cual salida de cámara (con un poco de contraste y tal). Si la colgué en Flickr fue por el momento (bastante kitch) del proyectado de rayos láseres contra la pirámide, algo que personalmente me parece bastante aberrante, pero bueno. Me hizo gracia y por eso "la salvé" de la selección, pero no la he ido colgando por ahí como hice con la otra. Está en Flickr y punto.

Y ahí se quedaron.

Al cabo de un tiempo, he ido añadiendo etiquetas a las fotografías, así como descripciones, porque ayudan a los buscadores a mostrarlas en los resultados.

Pero al ir revisando las fuentes de tráfico que me proporciona la herramienta de estadísticas de Flickr pro, he descubierto que la segunda imagen, más anecdótica que otra cosa, le da mil vueltas a la primera, por el simple hecho de contener las palabras "piramides", "construccion" y "extraterrestres" en su título. Así, he descubierto que mucha, mucha gente, busca en Google Images cosas como "piramides de giza aliens", "los extraterrestres construyeron las piramides", "aliens en egipto", "las piramides extraterrestres", y un largo etcétera de búsquedas pseudo-místicas que poco o mucho tienen que ver con lo que pretendía al darle ese título tan "esotérico".





Otro caso aún más espectacular, si cabe, es el de esta fotografía:

The Blair Witch Project. Subida a Flickr el 28-06-2011. Visualizaciones: 702

Y digo "espectacular" porque esta imagen, que ha superado a la de los extraterrestres, no lleva ni 5 meses online, mientras que la otra lleva más de 2 años. Parece mentira que la gente busque imágenes de esa película que no llegó ni a "serie B" en el año 1999 (!). En su momento le puse este título porque ese entramado de árboles, con la luz del sol filtrándose entre sus ramas, y la inclinación de la cámara me recordaron las escenas de esa película, de ahí que, además, la pusiera en blanco y negro. Lo dicho, no salgo de mi asombro… :)

Esto me demuestra que hay que darle títulos originales a las fotografías hasta cierto punto, porque si la gente busca cosas que luego no se corresponden con lo que pretendías, seguro que no vas a tener muchas visitas. Y si hubiese llamado a esas fotos "Proyección en las pirámides" o "Bosque" seguro que no hubiesen tenido, ni de largo, esas visualizaciones. O eso, o tienes a 1000 amigos en Flickr que vayan visitando periódicamente tu perfil.

En fin, un pensamiento de esos.

4/11/11

Cómo mejorar la visualización de tus imágenes en pantalla

Mucha gente me ha comentado que, al colgar sus imágenes en Internet, algunas de ellas auténticas maravillas, estas perdían calidad y quedaban como desenfocadas o con colores irreales, lo que naturalmente les resta espectacularidad.

Tener una buena cámara réflex o ser un genio en fotografía no basta para que una foto excelente se visualice correctamente en un navegador web, así que me propuse crear una entrada para explicar mis métodos para mejorar la visualización de imágenes JPEG en la red.

He aquí algunas consideraciones previas sobre el flujo de trabajo:

  1. Procesar las imágenes (siempre que sea posible) a un tamaño mayor que el que irán en la página web. No hace falta que sean mucho mayores, pero el interpolado que utiliza Adobe Photoshop al reducir las imágenes ayuda a suavizarlas un poco.
  2. Trabajar en modo sRGB. Aunque según las notas oficiales, tanto sRGB como AdobeRGB son exactamente iguales, la verdad es, como tantas otras veces en la vida, un poco diferente. La realidad –al menos hoy en día– es que sRGB es el perfil de color estándar universal para monitores e impresión. Ya trataré con más detalle estas diferencias, pero valga decir que el rango cromático de sRGB es mayor que el de AdobeRGB, así que…
  3. Antes de exportar las imágenes a JPEG, acoplar todas las capas que pueda tener. Esto –que parece una tontería– es importante porque los modos de fusión utilizados, o diferentes valores de opacidad, o efectos de capa como filetes o sombras paralelas pueden verse afectados en mayor o menor medida a la hora de reducir el tamaño de una imagen.
  4. Una vez acoplada la imagen resultante, ponerla al tamaño final de visualización en la web. Esto es importante, pues una imagen mayor que su tamaño de visualización queda como con cortes, y una imagen menor que su tamaño de visualización queda, naturalmente, pixelada. Así que es vital conocer el tamaño final de visualización.
    En caso de que una imagen aparezca en diferentes tamaños (por ejemplo, una galería de imágenes con las miniaturas correspondientes) es muy importante tener copias de las imágenes para todos los tamaños.
  5. Una vez tengamos todas las imágenes creadas, hay que enfocarlas. Es vital que NO se haya enfocado la imagen hasta este momento, porque al interpolar las imágenes el enfoque se pierde; y una imagen enfocada y luego interpolada no se ve igual que una imagen interpolada y luego enfocada.
Uno de los puntos más importantes del proceso es, naturalmente, el último. Y es aquí dónde radica el "secreto" de una buena visualización de las imágenes en la web.

Tomemos, por ejemplo, una imagen cuyo tamaño real es de 2000x1200 px. Como, naturalmente, hay muy pocos monitores hoy en día que tengan una resolución mayor que 2000 px de ancho, hay que visualizar una versión reducida de la imagen, lo que inevitablemente implica interpolación y, por lo tanto, pérdida de calidad. Es por este motivo que es tan importante trabajar a tamaños finales para las imágenes, ya que de este modo podemos controlar perfectamente cómo se ven las imágenes en todo momento y no dejamos nada al azar.

Esta es la imagen original (de 2000x1200 px) re-escalada directamente con HTML a un tamaño mucho más aceptable en monitores (el estándar actual marca monitores de 1024 px de ancho): 800 px.

Imagen #1: sRGB, 2000x1200 px, sin enfocar, forzada a 800x480 px mediante código HTML. Peso de la imagen: 1.0 MB. © Marc Mateos, 2011

Al aplicar, en Photoshop, una máscara de enfoque o un filtro de enfoque (Filtros > Enfocar > Enfocar) a esa imagen, obtenemos lo siguiente (forzándola, también, a un ancho de 800px):

Imagen #2: sRGB, 2000x1200 px, con enfoque, forzada a 800x480 px mediante código HTML. Peso de la imagen: 1.3 MB. © Marc Mateos, 2011

Naturalmente, cargar 2 imágenes de 2000x1200 px en esta entrada del blog, según como sea vuestra velocidad de conexión, tardará un poco. Y lo peor de todo: para visualizarlas a 800x480 px, por lo que estamos descargando mucho más peso del que realmente necesitamos.

Al crear una versión al tamaño final (eso sí: tomad la precaución de guardar la imagen original para no perder el tamaño real…), es decir, a 800x480px, obtenemos lo siguiente:

Imagen #3: sRGB, 800x480 px, sin enfocar. Peso de la imagen: 192 KB. © Marc Mateos, 2011

Que, como podemos ver, se visualiza bastante mejor. Ahora vamos a enfocar esa imagen de 800x480 px:

Imagen #4: sRGB, 800x480 px, con enfoque. Peso de la imagen: 248 KB. © Marc Mateos, 2011

Esta última imagen, que se ve muuucho mejor que la #2, ya es una buena aproximación al ideal. Eso sí, ahora se ve demasiado enfocada. Para reducir un poco ese enfoque, podemos usar el método Edición > Transición Enfocar… (que sólo nos aparecerá justo después de haber aplicado el filtro Enfocar) y darle una opacidad del 40-50%. Esto reducirá el impacto del filtro sobre la imagen, dándole un aspecto mucho más natural:

Imagen #5: sRGB, 800x480 px, con enfoque. Peso de la imagen: 216 KB. © Marc Mateos, 2011

Como reconozco que los cambios realizados en esa imagen son muy sutiles (aunque dicho sea de paso, en Internet marcan la diferencia entre una imagen de calidad y una imagen a secas), aquí tenéis una imagen que contiene la mezcla del paso #1 –inicial–, a la izquierda, y el paso #5 –final–, a la derecha:
Imagen #6: sRGB, 800x480 px, mezcla de los pasos #1 y #5. Peso de la imagen: 204 KB. © Marc Mateos, 2011

Y como muestra de lo que puede pasar en caso de que la imagen sea más pequeña que su tamaño de visualización, en este caso una imagen de 600x360 px:
Imagen #7: sRGB, 600x360 px, con enfoque, forzada a 800x480 px mediante código HTML. Peso de la imagen: 116 KB. © Marc Mateos, 2011

Y todavía más: lo que sucede al aplicar el perfil de color Adobe RGB (que, por cierto, no se visualiza correctamente igual en todos los monitores, por lo que es posible que incluso no veáis ningún cambio perceptible… Pero esta imagen debería tener unas tonalidades bastante más rojizas):
Imagen #8: AdobeRGB, 800x480 px, con enfoque. Peso de la imagen: 220 KB. © Marc Mateos, 2011
-

El Egipto post-Mubarak, agosto de 2011

Después de la Revolución Egipcia del 25 de enero de 2011, el país se sumió en una situación única en su milenaria historia que inspiró, asustó, ilusionó y movió a millones de personas por igual. La "Fiesta de Tahrir", como los egipcios llamaron a la larga ocupación de la famosa plaza de El Cairo, dio la vuelta al mundo; los revolucionarios se organizaron gracias a redes sociales como Twitter o Facebook, que de una forma jamás vista salieron de su ámbito cotilla y meramente online para cambiar el rumbo de un pueblo para siempre. El ejército y sus tanques salieron a la calle y el mundo vio como, poco a poco, lo que había empezado como una celebración de la libertad, acababa a pedradas y cócteles molotov.

Hoy en día, con Mubarak ya expulsado de su particular trono de faraón, el país sigue con problemas para recuperar su lugar en el mundo; los turistas, que aún no hace un año colapsaban todos los monumentos que antaño maravillaron a gentes como Alejandro Magno, Julio Cesar o el mismísimo Napoleón Bonaparte, habían desaparecido de la faz del desierto. Ya no había cruceros surcando el río africano, ni autocares volando por las polvorientas carreteras de Luxor, camino al Valle de los Reyes. Egipto, aunque más libre que nunca, estaba muerto de cara a una de sus principales fuentes de ingresos: el turismo.

El miedo, más irracional que racional, se apoderó de la gente, que empezó a anular billetes y paquetes vacacionales por temor a más revueltas. Lo gracioso del tema es que aquí, en España, el movimiento 15-M –un eco de esos revolucionarios de Túnez y Egipto– era brutalmente expulsado de las plazas que les sirvieron de hogar pacífico por la policía. Y, al igual que en Egipto, la gente pedía a gritos un cambio en la sociedad. Pero por alguna oscura razón, lo de aquí parecía grotescamente irreal por tratarse de un país supuestamente tranquilo –pero que les pregunten a los que acabaron en urgencias por contusiones y balazos de goma–. España no podía asemejarse a Egipto por una razón muy sencilla, aunque falsa: la gente se estaba pegando en la Plaza del Sol, o en Plaça Catalunya, pero el resto del país era seguro. Las imágenes que llegaban de Egipto eran de batallas campales. Eso, por lógica, sólo podía significar que "Egipto no era seguro". Pero la situación era exactamente "la misma" aquí que allí.

Lo que suele pasar, de todos modos, es que lo que llega del extranjero acostumbran a ser las malas noticias. Y como es natural a nadie le interesaba ver como el "otro" Egipto, el Egipto ajeno y alejado de Tahrir, seguía igual. Bueno, igual no: sin fotos de Mubarak por las calles.

Y basta con atreverse a ir para poder juzgarlo por ti mismo. Con este álbum de fotos, lo que pretendo es mostrar la otra cara de la moneda: la del Egipto tradicional, la del Egipto tranquilo y pacífico, la del Egipto post-Mubarak y que, esperemos, llegue a buen puerto al fin. Fuimos de apartamento, por libre y con mochilas. Sin hoteles, cruceros ni autocares con aire acondicionado. Y en ningún momento tuvimos la sensación de inseguridad. Nunca.

Egipto fue seguro. Es seguro. Y seguirá siendo seguro. Sólo basta con apagar el televisor para ver esa realidad, tan real como la Revolución.

Poco a poco, va volviendo el turismo. Y esperemos que la gente siga yendo a ese maravilloso país.

¡Viva Egipto libre!

Reloj vegetal | Green clock Dónde las serpientes marcan el camino Teacher Ragab Una ''X'' marca el lugar ¡Ayúdanos, Batman! | Help us, Batman! Pues no parecen tan colosos desde aquí… | So, they don't look that colossi from up here... Éxodo Espejo de tierra (v1) | Swamp mirror (v1) Esperando al higienista dental... | Waiting for the dental hygienist Geometría Momentos de refresco Asomando tras la duna Delirios de grandeza Al Haram TV Cuando hay más parabólicas que techos El caminito rojo | The red path Ahmed fii Dahshur Ramadán en Dahshur Pirámide vaca Cuestión de tamaño... Bosque en el desierto David Bisbal tenía razón... Giza al completo. Tampoco son tan grandes, vistas así... ¿Dónde demonios lo puse? | Where the hell I put it? No quiero verlas... prefiero dormir Pirámide rasgada IMG_6275 Capillas de Hatchepsut IMG_6279 IMG_6280