I love TextMate

Llevo una semana obligándome a usar NetNewsWire y MarsEdit para escribir posts en Apple Weblog.

También le di una oportunidad a ecto), pero es casi tan poco eficaz como MarsEdit.

Y he decidido que no le llegan ni a la suela de los zapatos a TextMate y su “Blogging Bundle

La combinación de TextMate (con unas funciones tan increíblemente útiles como “enlaza esta palabra con el primer resultado que aparezca en Google cuando la buscas”) y QuickSilver (con un trigger personalizado que inserta en el texto la URL de la web que tenga abierta en Safari) deja en ridículo a programas dedicados que cuestan una pasta absurda (para hacer lo que hacen como lo hacen)

TextMate en acción

Post patrocinado por “Programas que valen más de lo que cuestan™”

Retocando código en vivo y en directo

Hay una máxima en el mundo del desarrollo web:

Nunca toques código en una máquina en producción.

Hay una máxima en el mundo de la creatividad:

¿Por qué no?

Con todos ustedes, “código creativo™”, destrozando el HTML de la página en vivo y en directo.

La culpa de todo, esta vez, es de Alberto y su manía de verlo todo en Explorer :P

(Update: Parece que lo peor ya ha pasado. El site ha sufrido ligeras variaciones de diseño que no tienen nada que ver con los bocetos que tenía guardados en alguna parte, pero es lo que tiene diseñar escribiendo código…)

Mi primer plagio, ¡chispas!

Justo antes de mudarme a Madrid terminé la imagen corporativa de John Medina, una empresa que gestiona propiedades inmobiliarias en Sotogrande.

El trabajo fue particularmente interesante, la relación con el cliente fantástica, y el resultado (en mi opinión y en la de otros) bastante bueno. Uno de esos proyectos donde te compenetras con el cliente, entiendes de dónde viene y a dónde quiere ir, y sonríes cuando vas viendo cómo evoluciona tu trabajo.

Después de darle miles de vueltas al asunto, la imagen corporativa se ideó como una pequeña historia (uno de esos “logos con explicación” que uno estudia cuando es jovencillo). La presentación del logo causó tan buena impresión que se decidió incluirla en la entrada de la página web.

Logo John Medina

En una bella pirueta del destino, justo cuando celebro mi primera década como diseñador, un pajarito me cuenta que he alcanzado la cima de mi carrera: me han fusilado un diseño :)

Dice la gente que entiende que “el plagio es la mayor forma de elogio”, pero me parece un poco cínico que tu empresa se llame “The Brand Company” si lo primero que vas a hacer es choricear el logo…

¿No?

Sinfest, humor salvaje

No suelo postear enlaces a sitios molones (para eso ya hay unos cuantos blogs interesantes), pero el caso de Sinfest es diferente.

No es el clásico sitio “trendy”. De hecho es bastante salvaje, y ni siquiera podría decirse que es “mono”.

Pero es que la tira de cómic vale su peso en oro:

Tira de Sinfest del 29 de Septiembre de 2006

Eso sí, no es recomendable para espíritus sensibles (o sí, siempre que no leas los textos… :)

(Update: sirva este estropicio de imagen en el post para recordarme que tengo que cambiar el diseño de una maldita vez : )

Herramientas para desarrollo web “hardcore” en Mac

A raíz del post sobre jQuery, estuve revisando la web de AquaPath para ver si había alguna novedad.

Y me he encontrado con una colección de herramientas impresionante para desarrolladores web estilo “hardcore” (i.e: de los que escriben su código directamente con unos y ceros : )

Algunas, como XMLNanny, ya las conocía. Pero hay suculentas novedades en la lista.

Algunas de las herramientas que encontraremos son:

  • XMLNanny: Un validador XML y XHTML, perfecto para validar código que tienes en local sin volverte loco con los validadores del W3C.
  • Safari Guide: Para evaluar expresiones XPath, XQuery, XSLT y JavaScript en el documento que tengamos abierto en Safari.
  • AquaPath: Una utilidad que nos permitirá evaluar expresiones XPath 2.0 en documentos XML (incluyendo XHTML), viendo el resultado gráficamente.
  • OttoMate: Para automatizar el testing de sitios web usando Automator, parecido a Selenium, pero para Safari.
  • XML-RPC Client: Un cliente gráfico para servicios XML-RPC (WordPress, por ejemplo)

Hay más, pero así de repente estas son las más interesantes (o al menos las que yo entiendo para qué sirven :)

Javascript no intrusivo con jQuery

Tenía a jQuery en mi lista de “cosas que tengo que probar un día de estos” desde hace tiempo.

Para un proyecto que tenemos, he empezado a trastear con esta librería, y los resultados (inmediatos) me han dejado muy buen sabor de boca.

Vamos con unos ejemplitos de lo que sabe hacer jQuery:

Lista de resultados “con pijama”…

Este es un quebradero de cabeza clásico, para el que se han planteado muchas soluciones. La que he encontrado, usando los selectores CSS + DOM de jQuery es tan simple que casi da miedo:

$("#lista ul li:even").addClass("even");

Que viene a decir: “dentro del div #lista, me seleccione todos los li impares dentro de un ul, y les añada la clase ‘even’”

El HTML que estoy usando es bastante limpito:

<div id="lista">
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
    </ul>
</div>

Pero dejarlo así sería desaprovechar toda la potencia de jQuery (y manchar un poco el HTML, en realidad). Así que, después de mirar un rato (10 minutos) la documentación, me encuentro con que puedo dejar mi HTML tal que así:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ul>

¿Y entonces cómo sé a qué lista tengo que ponerle el pijama? Aquí es donde entra en juego toda la potencia de los pseudo-selectores de jQuery (el li:even) es uno de ellos, pero hay muchos más

$(body ul:first li:even).addClass("even");

Que es como decir: “le añada la clase ‘even’ a los li impares de la primera ul que aparezca en el body” (en este caso he hecho trampa, porque sé que mi ul será la primera que aparezca en el documento)

Añadir un icono a los enlaces externos…

Este es un asunto que ya visitamos en un artículo anterior (Destacando enlaces externos en WordPress)

Usando jQuery hay varias maneras de hacer esto, pero voy a elegir una particularmente curiosa: usar una expresión XPath.

$("//a[not(contains(@href,'sofanaranja.com'))]").addClass("externo");

Esto sería el equivalente a “busca todos los elementos ‘a’ cuyo atributo src no contenga la cadena ‘sofanaranja.com’, y les añades la clase ‘externo’”.

(Lo de escribir expresiones XPath se sale un poco de la temática del post… : )

Javascript no intrusivo

Como vemos con este par de ejemplitos, los selectores de jQuery nos permiten hacer toda clase de perrerías (tanto en presentación como en comportamiento) sobre el DOM de nuestro documento sin (practicamente) guarrear el HTML.

Usando jQuery no hay excusa para ese crimen que es

... href="javascript:abreVentana()" ...

Me temo que seguiré comentando las bondades de jQuery una temporadita :D

Por qué me gusta jQuery, personalmente

  • Porque ocupa poco (15Kb comprimida)
  • Porque no le sobra nada, y lo poco que le falta es, casi siempre, innecesario :)
  • Porque la documentación está actualizada, bien escrita, y tiene ejemplos claros de qué se puede hacer y cómo.
  • Porque seleccionar elementos del DOM usando selectores CSS y XPath es droga dura: una vez que lo pruebas no puedes vivir sin ello.

Recursos interesantes…

Para trabajar con XPath, hace tiempo me encontré con AquaPath, una utilidad para Mac que vale su peso en oro…

10 añitos diseñando…

Hoy, durante la comida (en un japonés bastante bueno, regentado por un servicio no tan informativo como debiera) me han hecho recordar que, justo este mes, cumplo mi primera década perpetrando diseño.

Tenía preparadas unas fastuosas celebraciones por todo lo alto, pero mi cuenta corriente me ha informado gentilmente de que “va a ser que no”, así que me conformaré con anunciarlo públicamente y sorprenderme a mi mismo por ser capaz de llevar una década haciendo algo sin aburrirme mortalmente a los 15 minutos.

Mis condolencias al mundo real™, porque parece que la cosa va para largo…

Reality check: Mac es raro

Vengo de atender a un amable técnico que venía a arreglar mi router.

Cuando lo ha encendido, después de la observación de rigor a las luces parpadeantes, me pregunta:

¿Tienes un ordenador a mano?

El único ordenador que tengo a mano es un PowerBook bastante baqueteado (el Mac mini está feliz en una estantería, y sólo vio una pantalla y un teclado el día que lo configuré)

Coño, ¡pero esto es un Mac!

Hmmm… la cosa va a ser dura.

¿No tienes un PC normal?

Pues no, mire usted…

Hubiera dado dinero por tener a mano una cámara para hacerle una foto al tipo. Deberían ponerla en la enciclopedia cuando buscases “aprensión”.

En fins…

Un par de notas sobre QuickSilver

Para los asistentes al curso (y para los que no fueron : )

El manual al que hacía referencia está aquí en formato PDF. El autor también ha creado una cheat sheet para QuickSilver

Podeis hacer comentarios al manual en este thread del foro de QuickSilver (que, por otra parte, es totalmente recomendable porque está lleno de freaks que comparten trucos : )

Fue un placer tenerles en el Aula Coctelera™ ;D

Oops…

Si usas un lector de feeds, habrás comprobado que te han vuelto a aparecer los últimos 10 posts de Sofá Naranja.

No es que me haya dado por retocarlos todos, es que he cambiado el feed para que muestre los artículos completos en vez del resumen (porque, de todas formas, ¿alguien visita la web alguna vez? : )