Extensión para usar emoticones en Twitter.com

22 ago ● Nice

Bonita extensión para Safari 5 desarrollada por McDo Design. Agrega un pop-up dentro de la caja para escribir tweets y reemplaza los emoticones del tipo :-B , :’( directo en la timeline. Lo mejor son los iconos, que están geniales.

Se lo puede descargar desde acá.

Añadir soporte para enlaces wp.me en WordPress

22 ago ● WTFs

El otro día decidí eliminar el sistema de comentarios de WordPress (que nunca había integrado) y reemplazarlo por una caja de @anywhere, para dirigir el flujo de opiniones/dudas hacia Twitter. Leyendo el códex de WordPress encontré la función para generar enlaces cortos. El resultado no fue muy favorable:
Código:

<?php echo wp_get_shortlink($post->ID); ?>

Salida:

http://www.matmartinez.net/blog/?p=XX

Esto estaría correcto desde el punto de vista de un link corto, si se usa el formato de permalink largo. Pero para Twitter no es lo suficientemente corto. Anteriormente usando la función

wp_get_shortlink()

WordPress devolvía un enlace del tipo wp.me. Ya no… a menos que se use el plugin de estadísticas de WordPress, como se lee en el changelog del plugin.

1.6
Add shortlink generator. Now wp.me shortlinks are available on the Edit Post screen from a button next to View Post.

Al instalar el plugin la función se actualiza automáticamente. Otra de las curiosidades de la vida. Al final, el enlace de wp.me como prueba.

Hacer un botón de 3 estados con CSS

22 ago ● Código

No hay cosa más linda que un botón con CSS. Bueno, probablemente sí, pero de cualquier forma igual son geniales. Varias personas me han preguntado como hacerlo (Personas que quizá no saben usar Google). El truco es muy simple: Se usa una sola imagen y a través de spriters –en el CSS– se generan los 3 estados; normal, sobre y presionado.

Voy a usar de ejemplo un botón ya listo, porque no quiero hacer otro, y espero que no me lo copien :D . Este lo uso en una sección de mi web. Se ve así:

Nótese que es una imagen. El primer estado sería el normal, el segundo sobre y el tercero presionado. Simplemente cambia la luminosidad del botón. Fácil. Ahora establecemos el código de la siguiente manera:

/* Botón en estado normal, se especifica el ancho y alto del botón.
    se establece background-position indicando top para la primera
    imagen. */

a.contactame {
    background-image: url(images/contactame.png); /* su imagen :P */
    background-position: top;
    height: 24px;
    width: 75px;
    text-indent: 9000px;
    display: block;
}
/* Center para la imagen central, estado :hover o sobre. */
a.contactame:hover {
    background-position: center;
}
/* Bottom para la última imagen, estado :active o presionado. */
a.contactame:active {
    background-position: bottom;
}

Eso en lado del CSS. Para insertarlo en el HTML simplemente especificamos la clase .contactame para el enlace.

<a class="contactame" href="http://www.ejemplo.com/">
<p style="display:none;"><strong>Contactame</strong> <br />Texto descriptivo.</p></a>

Y eso es todo. Espero que les sirva :D

Actualización: Se me olvidó la demo. Pueden verlo en acción aquí.

Comprimir JavaScript para acelerar la carga

21 ago ● Código

Una de las cosas que más preocupan a la hora de hacer una web, es el tiempo de carga. Es difícil que esa web no incluya JavaScript para animaciones (Con jQuery, por ejemplo) o manejo del contenido. Por alguna razón casi nadie comprime los scripts, aumentando su tamaño y generando un retraso en el tiempo de descarga.

Pero existe una herramienta gratuita y fácil de usar creada por Yahoo!: El compresor YUI. Escrito en Java, analiza el código y su estructura, lo ofusca, elimina las líneas de comentarios innecesarias, retornos de carro, espacios, etc.

Personalmente, he podido ahorrar hasta un 80%. Arriba está el ejemplo claro. Así que, ¿No comprimir el código? Usted no lo haga.

Probando la app de WordPress

21 ago ● Apps

Así de fácil es escribir desde el iPod. Igual no será tan cómodo como el Mac, pero se tipea a una velocidad decente. A veces el problema es el autocompletado, juega malas pasadas :\
Eso. http://ios.wordpress.org/

Tip Cocoa: Acortar direcciones usando bit.ly

20 ago ● AppsCódigo

Tarde o temprano uno termina necesitando código para acortar direcciones dentro de las apps. Hacerlo es muy fácil! Se requiere amor y una cuenta de bit.ly (gratutita) en orden de obtener un API key. Eso lo pueden hacer acá. ¿Ya lo habían adivinado? Excelente. Con sus API key en la mano vamos a la obra.

Vamos a descargar la URL limpiecita, tal como Dios (?) la trajo al mundo. Olvídate del parsing. Usaremos NSOperationQueue… si no la usan van a pegarle la interfaz al usuario.

// Creamos nuestro NSOperationQueue...
NSOperationQueue *queue = [NSOperationQueue new];

// ... y una NSInvocationOperation para llamar al método que hace el trabajo.
// Le estoy pasando nil, pero ustedes lo harán usable.
NSInvocationOperation *operation = [[NSInvocationOperation alloc] initWithTarget:self
                                selector:@selector(shrinkURL)
                                object:nil];

// Añadimos la operación... y liberamos memoria.
[queue addOperation:operation];
[operation release];

Ahora falta crear nuestro método que corta las direcciones. longURL contiene la dirección sin cortar. Entonces sería así:

- (void)shrinkURL
{
   NSError *error = nil;
   // Creamos nuestra llamada. Reemplazan USUARIO y API_KEY :P
   NSString *call = [NSString stringWithFormat:@"http://api.bit.ly/v3/shorten?login=USUARIO
&amp;apiKey=API_KEY&amp;uri=%@&amp;format=txt"
, longURL];

  // Descargamos la super-url. Hay maneras y maneras, pero se entiende.
  NSString *shortURL = [NSString stringWithContentsOfURL:[NSURL URLWithString:call]
                         encoding:NSASCIIStringEncoding
                         error:&amp;error];
}

Así de fácil es. Ahora ustedes usarán métodos decentes para descargar y todo eso. Espero. Hasta pronto! :D

Icono de Stormtroper

20 ago ● Iconos

Lo encontré super-choriflai. Se lo bajan desde acá. Les paso el dato de iconpaper.org, por si no lo conocen.

La real primera entrada

19 ago ● AppsFotosSuperlinksVideosWTFs

La primera es la de WordPress, la dejo por tradición. No tengo idea que quiero hacer con este blog. Pero quiero hacer algo. Intentaré hacer aparecer las categorías con magia. Splash! (Sonido mágico)

Por la foto no pregunte (De hecho, no puede, no escribí el código de los comentarios) pero corresponde a mi casa antigua. El CRT de 17′ le dará la explicación de mi avatar. Hasta pronto.

¡Hola mundo!

19 ago ● Sin categoría

Bienvenido a WordPress. Esta es tu primera entrada. Edítala o bórrala, ¡y comienza a publicar!.