Mini-tutorial: Guarreando Imágenes

Jelou…

Siguiendo la línea didáctica del Mini-tutorial de AJAX, hoy le toca el turno a otro tema del que hablaba hace unos días: el guarreo de imágenes.

En esta ocasión vamos a ver cómo potrear imágenes para tener un look grunge-que-te-cagas por el método manual. Siempre existe la opción de usar el Machine Wash, pero hacerlo a mano es más divertido y te permite más control sobre el resultado final.

Sin más leches, aquí va un mini-tutorial de cómo se hace.

Lo que queremos conseguir

La idea es pasar de esto:

a esto:

Empezamos

Vamos a necesitar lo siguiente:

  • Una imagen para guarrear
  • Una textura de fondo, preferentemente un pelín asquerosa (papel antiguo, una pared cochambrosa…)
  • Unos pinceles especiales para dibujar agujeros, rotos, desconchones… Hay algunos muy buenos en Dubtastic
  • 15 minutillos
  • Un Photoshop :)

Os adjunto un fichero con las imágenes que voy a usar en este tutorial: Tutorial-guarreo

Vamos al lío

Empezamos abriendo nuestra imagen original. Cuando lo hagamos, convertiremos la capa “Background” en una capa transparente haciendo doble click en el nombre y cambiando “Background” por cualquier otra cosa:

——>

Ahora abrimos nuestra imagen de textura y la pegamos detrás de la imagen original.

Para que se vea la textura de fondo, tenemos dos opciones:

  • Cambiarle la transparencia a la capa original
  • Cambiar el modo de la capa original.

Para este tutorial, voy a cambiar el modo de la capa original, de “Normal” a “Multiply”.

El efecto de cada modo depende de las imagenes que tengamos en cada capa. Con las imágenes de este tutorial, el efecto es algo parecido a esto:

con lo que ya le hemos echado 30 años encima a la imagen original :)

Ahora lo que nos queda es potrearla un poquito para darle ese aspecto de “mira lo que acabo de encontrarme en el baúl de mi bisabuela”.

Para ello, la técnica más aceptada es la siguiente:

  • Seleccionamos la capa con la imagen original
  • Creamos una nueva capa de máscara del tipo “Reveal All”

Una capa de máscara sirve para mostrar u ocultar partes de la imagen sin borrarlas del original.

La paleta de capas ahora tendrá esta pinta:

A partir de ahora, para editar la imagen original tendremos que hacer click en el pincel de la capa, y para editar la máscara haremos click en el círculo.

Ahora es cuando podemos empezar a guarrear la imagen.

Seleccionamos algún pincel asqueroso (este es del Set 001 de Dubtastic):

Y empezamos a borrar un poco (yo suelo poner la opacidad de la herramienta de borrar al 10% para que el efecto no sea demasiado bestia)

Aquí ya me empezado a cargar una esquina… :P

El resto no tiene ningún misterio… ir borrando en la máscara, cambiando de pincel, hasta que la imagen tenga una pinta realmente asquerosa…

Y poco más, la verdad… :D

Mini-tutorial de AJAX

Sofá Naranja, en su empeño por acercar la tecnología al pueblo, presenta un mini-tutorial sobre el palabro de moda: AJAX. Si andabas buscando una excusa para trastear con AJAX, la acabas de encontrar. AJAX es fácil. AJAX es potente. AJAX lava más blanco. AJAX es, en definitiva, una Cosa Guapa™

¿Qué es AJAX?

AJAX son las siglas de Asynchronous JavaScript And XML. Es una colección de tecnologías que permiten desarrollar webs altamente interactivas ahorrando ancho de banda y recargas de página.

La clave para el funcionamiento de AJAX es el objeto XMLHttpRequest (uno de los pocos inventos útiles de Microsoft, mira por dónde)

Actualmente, AJAX funciona en los siguientes navegadores:

  • Mozilla y familia
  • Internet Explorer Windows (a partir de la versión 5)
  • Safari y familia (en teoría, no tengo un Konqueror para probar)

Más información en la Wikipedia

Qué necesitamos para este tutorial

  • Un editor de texto
  • Un servidor web
  • Café (opcional)
  • Unos 30 minutillos

Vamos a construir una página web simple, donde cargaremos datos a partir de otra sin necesidad de recargar la página actual. También veremos como darle al usuario un poco de “feedback” de qué está pasando. Con suerte, también nos tomaremos un café.

Empezamos

La cosa empieza suave. Vamos a crear un fichero HTML (que en un derroche de originalidad llamaremos ‘index.html’) con el siguiente contenido (véase que somos unos pedantes y vamos a usar sintaxis XHTML 1.1 pata negra):

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Mini-tutorial AJAX</title>
    </head>
    <body>
        <h4>Mini-tutorial AJAX</h4>
        <div id="detalles"></div>
    </body>
</html>

Como vemos, nada del otro mundo. Nótese el detalle de que tenemos un DIV vacío, al que le hemos asignado un ID único. Es en este DIV donde vamos a cargar nuestro contenido dinámico.

Complicando el tema

Ahora vamos a crear el objeto XMLHttpRequest, que será el encargado de actualizar el contenido dinámico de nuestro DIV ‘detalles’.

Creamos un fichero (que, recurriendo a nuestra creatividad habitual, llamaremos ‘ajax.js’):

ajax.js

//  Vamos a presuponer que el usuario es una persona inteligente...
var isIE = false;
//  Creamos una variable para el objeto XMLHttpRequest
var req;
//  Creamos una funcion para cargar los datos en nuestro objeto.
//  Logicamente, antes tenemos que crear el objeto.
//  Vease que la sintaxis varia dependiendo de si usamos un navegador decente
//  o Internet Explorer
function cargaXML(url) {
    //  Primero vamos a ver si la URL es una URL :)
    if(url==''){
        return;
    }
    //  Usuario inteligente...
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    //  ...y usuario de Internet Explorer Windows
    } else if (window.ActiveXObject) {
        isIE = true;
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    }
}

Bien. De momento tenemos una función que crea un objeto XMLHttpRequest (con una u otra sintaxis, dependiendo del navegador) y le asigna la función ‘processReqChange’ al evento ‘onreadystatechange’ (que ahora explicaremos qué quiere decir :)

También hemos usado el método ‘open’ de XMLHttpRequest (que se usa para asignarle la dirección URL de donde va a cargar los datos) y el método ‘send’ (que se usa para efectuar la llamada a la URL asignada con ‘open’)

Nos vamos a detener un poco en la sintaxis de ‘open':

open('metodo','URL',modo-asincrono,'usuario','password');

Los dos primeros parámetros son obligatorios. ‘metodo’ puede ser GET o POST, modo-asincrono es un booleano (TRUE|FALSE) que indica si la llamada será asíncrona (se seguiran ejecutando scripts en la página mientras se cargan los datos) o no (se detendrá la ejecución de los scripts hasta que se complete la carga de datos). ‘usuario’ y ‘password’ son, sorprendentemente, el usuario y el password a usar si la URL requiere autentificación

Seguimos…

Ahora declararemos la función processReqChange:

function processReqChange(){
    //    Referencia a nuestro DIV con ID unica:
    var detalles = document.getElementById("detalles");
    //    Si se ha completado la carga de datos, los mostramos en el DIV...
    if(req.readyState == 4){
        detalles.innerHTML = req.responseText;
    } else {
        //    ...en caso contrario, le diremos al usuario que los estamos cargando:
        detalles.innerHTML = '<img src="loading.gif" align="absmiddle" /> Cargando...';
    }
}

processReqChange es una función que se ejecuta cada vez que se dispara el evento ‘onreadystatechange’ del objeto XMLHttpRequest. ¿Y cuando se dispara este evento? Pues, como su propio nombre indica, cada vez que cambia el estado del objeto. Este evento le asigna al objeto XMLHttpRequest una variable (‘readyState’) que puede tener los siguientes valores (puede tener más, pero es que si no esto no sería un mini-tutorial):

  • 0 = no inicilizado (por ejemplo, cuando acabamos de crear el objeto)
  • 1 = cargando datos (hemos llamado al método ‘send’ del objeto)
  • 4 = carga completada (ya podemos acceder a los datos que nos ha devuelto el servidor)

Entonces, cada vez que cambie la variable ‘readyState’ miramos si es igual a 4 (carga completada), y si es así metemos el contenido del objeto XMLHttpRequest

req.responseText

en nuestro DIV

detalles.innerHTML = req.responseText

Integrando el script

Ahora vamos a enlazar el JavaScript con el HTML (por aquello de que funcione, y tal… es que si no no tiene gracia…)

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Mini-tutorial AJAX</title>
        <script src="ajax.js" language="JavaScript"></script>
    </head>
    <body>
        <h4>Mini-tutorial AJAX</h4>
        <div id="detalles"></div>
    </body>
</html>

Bien… ahora nos falta llamar a la función ‘cargaXML’ de alguna forma. En nuestro ejemplo, vamos a usar un ‘select’ más o menos de este pelaje:

<select onchange="cargaXML(this.value)">
    <option value="">Elige...</option>
    <option value="001.html">001</option>
    <option value="002.html">002</option>
    <option value="003.html">003</option>
</select>

Lo que estamos haciendo es decirle al navegador que cuando cambie la selección (‘onchange’) se ejecute la función ‘cargaXML’ con la URL que hemos puesto en el ‘value’ como parámetro’.

Nuestro ‘index.html’ definitivo quedaría tal que así (voy a añadir unos estilos para que se vea más claramente nuestro DIV ‘detalles’, y para que veamos que se puede decorar el contenido cargado dinámicamente con CSS):

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Mini-tutorial AJAX</title>
        <script src="ajax.js" language="JavaScript"></script>
        <style>
            #detalles {
                margin: 20px;
                border: 1px solid #F0F0F0;
                padding: 10px;
                font-size: 10px;
            }
        </style>
    </head>
    <body>
        <h4>Mini-tutorial AJAX</h4>
        <select onchange="cargaXML(this.value)">
            <option value="">Elige...</option>
            <option value="001.html">001</option>
            <option value="002.html">002</option>
            <option value="003.html">003</option>
        </select>
        <div id="detalles"></div>
    </body>
</html>

Lógicamente, ahora deberemos crear los ficheros ‘001.html’, ‘002.html’ y ‘003.html’. Esto, como diría mi profesor de álgebra, es trivial y se deja como ejercicio para casa.

Nota: si estás pensando en usar una URL externa a tu dominio, que se te vaya quitando la idea de la cabeza. XMLHttpRequest está sometido a las mismas restricciones de seguridad que el sandbox de JavaScript: no puedes usar el protocolo file:// y no puedes acceder a direcciones fuera de tu dominio. Ahora bien, si tu proveedor es un poco freestyle en temas de seguridad (y es un tema que, digamos, tampoco te preocupa demasiado a ti) puedes usar el viejo truco de incluir el fichero mediante PHP:

include('url-externa-de-la-que-no-sabemos-nada');

Vaya por delante que hacer esto es una locura, y que lo más probable es que tu proveedor no te deje ni intentarlo.

Chapando

Bueno, pues de momento esto es todo… aquí os dejo un ZIP con todos los ficheros, y espero vuestros comentarios.

Para más información, y un tutorial más completo sobre XMLHttpRequest (incluyendo algunas nociones de cómo parsear XML) date una vuelta por la web de Apple Developer

ColorBlender

Un generador de paletas de colores automático, via web: ColorBlender

Es el hermano mayor de ColorMatch 5K (que aunque tiene menos funcionalidades, es mucho más rapido que ColorBlender, algo que es un mal endémico en el mundo del software…)

La verdad es que no sabía si dedicarle un post, pero es el típico enlace que nunca encuentras cuando lo necesitas… Lo mismo un día de estos hago un recopilatorio de selectores de color (sí, hay vida más alla del picker de Adobe o el de Apple :-)

Machine Wash Filters

Salvo que hayas estado escondido bajo una piedra los últimos meses, te habrás dado cuenta de que el guarreo está de moda.

Hay quien dice que gran parte de la culpa la tiene Mr. Zeldman. Los que llevamos en esto algún tiempo sabemos la verdad: la culpa es de David Carson :D

Pero modas aparte, lo cierto es que hay algo de fascinante en el look cutre, el “guarreo”, el estilo grunge… está claro que no es para todos los proyectos, pero en los que se deja usar el resultado suele ser bastante interesante (y además, qué puñetas, es tan divertido… :-)

El gran problema de potrear imágenes es que se pierde mucho tiempo…

¿Y qué hace uno cuando pierde mucho tiempo tratando imágenes?

Pues se curra unas acciones de Photoshop, claro.

Esto mismo es lo que han hecho los amigos de Mister Retro con sus filtros “Machine Wash”. No se les puede llamar plug-ins, por la simple razón de que no lo son. Machine Wash es una colección de acciones que, combinadas con las ma-ra-vi-llo-sas texturas que incluye el CD te permiten dar a tus imágenes ese estilo “atropellado-por-un-camión-de-19-toneladas”.

Como siempre, una imagen vale más que mil palabras:

Original:

Después de pasar por un ciclo corto de Machine Wash:

¿Impresionante, verdad?

Pues más impresionante aún es el precio… $32 por volumen (tienen 2, con 60 filtros por volumen), o $60 si compras los 2 a la vez. Lo mejor es que, si eres un freak coleccionador de texturas, puedes usar tus propias imágenes para destrozar tu material gráfico.

Y si eres un artista de los de antes, y prefieres hacerlo todo a mano… siempre puedes bajarte los brushes de Dubtastic y dar rienda suelta a tu imaginación… pero no te olvides de MachineWash cuando los deadlines te empiecen a echar el aliento en el cogote :P

Anunciado Textpattern 4

Pues eso… uno de los mejores CMS del mundo libre, TextPattern, acaba de anunciar su versión 4.0. No, no es que se hayan saltado 3 versiones por la cara… hace una semana, te podías bajar TextPattern 1.0rc5, pero como bien dice su autor, llamar 1.0 a un software que lleva funcionando desde 2001 es un poco confuso…

No encuentro el changelog por ninguna parte, así que espero que hayan arreglado el bug con los ‘sticky post’. (En el post del blog de TextPattern detallan los cambios de esta versión, pero no es un changelog exactamente…)

En fin… si lo usas, toca actualizar. Si no lo usas, te sugiero que le eches un vistazo. El admin de contenidos es un trabajo fino-fino, y el sistema de tags, aunque un poco puñetero (sobre todo si estás acostumbrado a WordPress) es elegante como el solo (y potente, muy potente…)

Update: aparentemente, el sistema para hacer un post ‘sticky’ es un pelín enrevesado, por decirlo finamente…

Update 2: Por decirlo de alguna manera… WordPress es como el Lego. TextPattern es como el Lego Technic…

SonyEricsson W550i

Sofá Naranja, telefono… ¿naranja? :D

No hay fecha de salida, pero me temo que este trasto ya tiene un sitio en mi corazón…

Aparte de toda la parafernalia habitual en este tipo de teléfonos (mp3, cámara, bluetooth…), tiene soporte Java, SVG y Flash Lite (a ver si cuela en el presupuesto de “plataforma de desarrollo” :-)

Dios salve a Freehand…

Una imagen vale más que mil palabras…

En fin… fué bonito mientras duró (10 años ya, oiga…)

En otro orden de cosas, y sin tener absolutamente nada que ver con esto (salvo que ambas noticias podrían clasificarse en la sección “vaya por dios, el mundo se acaba), se acaba de lanzar el site Christopher Walken for President 2008

En fin… como dijo el poeta… “I need more cowbell”.

Update: por si quedaba alguna duda, lo de Walken for President 2008 es un bonito hoax

Oblique Strategies

Que Brian Eno es un genio es algo indiscutible (al menos para mí, aunque ya se sabe que en esto de la música lo del genio es un concepto totalmente elástico…)

Lo que no todo el mundo sabe es que además de ser un músico mítico, Brian Eno es un artista, profesor y gran pensador.

Una de las joyas que han salido de su cabeza es Oblique Strategies, una baraja de cartas con ideas para cuando te ataca el bloqueo creativo (entre otras cosas)

El concepto es tremendo, pero la ejecución es simplemente magistral.

Una baraja de Oblique Strategies puede costarte entre 30 y 1500 euros (dependiendo de si la compras nueva, más barata, o compras una original en eBay). De venta en EnoShop y RoughTrade

O la puedes tener gratis en un Widget de Dashboard: Oblique :D

Ya tardan en bajarselo…

Apple Mighty Mouse

Apple Mighty Mouse

La semana pasada Apple presentaba un producto que, para algunos, representa la sumisión de la compañía al clamor del pueblo: “queremos un ratón con dos botones y rueda de scroll!”.

Por supuesto, Apple nunca se ha caracterizado por dejarse influenciar por las masas, y han decidido hacer las cosas a su manera…

¿Dos botones, decís?

Pues nada, aquí teneis 4 (aunque en la práctica sean útiles solo 3, como explicaré más adelante)

¿Rueda de scroll?

Eso es del siglo pasado… aquí teneis un pezón clítoris “scroll ball” para desplazaros lateralmente.

¿Inalámbrico?

No, señores… no podemos vender un ratón más caro que el Mighty Mouse…

La verdad es que ya se ha leído de todo sobre el engendro. Lo han probado en Ars Technica, lo han diseccionado, y hay comentarios para todos los gustos y colores en todas las webs del planeta.

Pero hay algunos detalles que se escapan en la mayoría de los reviews, a saber:

  • Se han cepillado el ajuste de tensión del muelle: Para los que teníamos el Apple Pro Mouse antiguo (y el Wireless Mouse) y unas manos de muestra gratuita, era imprescindible ajustar la tensión del muelle al mínimo. Ahora, Apple decide por tí. Parece que lo han dejado en el ajuste medio. No es como para dejar de comprarlo, pero es un detalle…

  • El botón lateral es absolutamente inutil: Las alas laterales, que de toda la vida han servido para levantar el ratón mientras mantenías un click (algo fundamental trabajando con Photoshop, que siempre se te acaba la alfombrilla en el momento más inoportuno) ahora sirven para hacer click con el cuarto botón. La idea tiene cierto interés, pero la implementación es simplemente nefasta. Las alas son tan sensibles que es imposible levantar el ratón sin que se active el botón. Eso sí, si quieres pulsar las alas sin levantar el ratón, lo más probable es que el ratón se haga el sueco y no se dé por aludido.

  • El peso es perfecto: Pesa lo mismo que el Apple Pro Mouse (o al menos es la sensación que da). Todo un acierto teniendo en cuenta que el Wireless Mouse pesa un quintal y es practicamente imposible usarlo para trabajos finos.

  • Sólo hay una forma de coger bien un ratón, y probablemente no sea la que utilizas actualmente. El problema del Apple Pro Mouse es que puedes hacer click en cualquier parte. Yo estoy acostumbrado a tener el dedo índice y el corazón demasiado cerca del lado derecho. Tanto que el 40% de mis clicks con el Mighty Mouse se registran como clicks del botón derecho. Así que toca un tiempo de adaptación.

Por lo demás (y olvidándonos por un momento del precio) es un ratón totalmente recomendable. Para mi gusto, el Apple Pro Mouse original es uno de los ratones más cómodos, y el añadido de los dos botones y el scroll lo convierten en un periférico bastante más práctico. Aunque espero que Apple saque una actualización de firmware para corregir los fallos que tiene ahora…

Y no podía dejar de mencionarlo: el departamento de naming de Apple tiene que fumar algo realmente contundente… ¿Mighty Mouse?