Tutoriales, Wordpress

Comparte tus URLs cortas al estilo Techcrunch

Publicado por Claudia en junio 30, 2009

Hace algún tiempo, Techcrunch comenzó a usar su propio acortador de direcciones, con un dominio distinto al principal. Tener un acortador de URLs propio no es cosa difícil, especialmente si usas WordPress e instalas un plugin como Link Shortcut. Pero lo que me llamó la atención, fue la cajita que utiliza Techcrunch para compartir sus URLs cortas, las cuales se generan automáticamente para cada post.

Pienso que mostrar tus enlaces permanentes ayuda a que se difundan tus posts, especialmente si muestras URLs cortas para compartir en Twitter o Facebook. Una URL corta debería significar mayor difusión, porque les ahorra a tus visitantes el tener que ir a Bit.ly (u otro acortador), si es que no usan alguna extensión para Firefox o algún bookmarklet que les permita hacer esto con un click.

Aquí comparto la forma que encontré para mostrar tus URLs cortas al estilo Techcrunch y facilitar que compartan tus enlaces. Probablemente exista una manera distinta, más simple y hasta mejor de hacerlo, pero quise mostrar una vía “casera” que sí funciona (pueden ver el resultado de mi “experimento” al final de este post).

Un poco de javascript

Partiendo por lo general, lo primero fue buscar la manera de seleccionar todo el texto (la URL, en este caso) al hacer click con el mouse. Algo básico, pero necesario. De esta forma, utilicé un script que produce este efecto, y que puedes encontrar en Javascript Array o en Wallpaperama. Cualquiera de las dos versiones me va a permitir mostrar las cajitas para mis URLs, cambiando el valor (value) del input.

Buscando el plugin idóneo

En WordPress, hay varios plugins para generar URLs cortas, pero me decidí por “La Petite URL“, que hace este prodecimiento por sí mismo, instantáneamente.

Este plugin tiene opciones de configuración básicas: eliges el largo de tus URLs y el tipo de caracteres que quieres usar (letras minúsculas, mayúsculas y/o números). Luego de su instalación y configuración, sólo queda encontrar la función que me permita mostrar una URL corta para cada post, en el archivo single.php. La función que utilicé fue la siguiente:

<?php the_petite_url(); ?>

Dicha función muestra sólo los caracteres aleatorios de mi URL (ejemplo, “abcde”), por lo que antes tengo que añadir la dirección de mi blog (http://chicablogger.com/). Por lo tanto, procedí así:

1. Copié el siguiente código (el script) antes del cierre de la etiqueta “body“:

<script type="text/javascript">
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
</script>

2. Puse este código en mi single.php, antes de los comentarios:

<input type="text" style="width:180px; border: 1px solid #c3c3c3" onClick="SelectAll('short_txtfld');" value="<?php echo get_option('home'); ?>/<?php the_petite_url(); ?>" />

Ahora, para mostrar la URL completa (en vez de la versión acortada), el código deberá ser como el anterior, pero cambiando el valor (value) por este:

<?php the_permalink(); ?>

A considerar: El plugin funciona sólo para posts nuevos. Si quieres que genere URLs cortas para tus posts antiguos, deberás volver a guardarlos.

Una alternativa simple para Blogger

1. Pega antes del cierre de la etiqueta “body“.

<script type='text/javascript'>
function select_text()
{
var content=eval(&quot;document.myform.field&quot;);
content.focus();
content.select();
}
</script>

2. Busca el siguiente código:

<div class='post-footer-line post-footer-line-3'>

Y pega debajo:

<form action='' method='post' name='myform'>
<textarea name='field' onClick='select_text();' style='width: 180px; height: 15px; border: 1px solid #c3c3c3;'><data:post.url/></textarea>
</form>

El código anterior no genera URLs cortas, pero sí muestra tus URLs para trackbacks.

Tags: , ,
Herramientas

View Like Us: Prueba tu web en distintas resoluciones

Publicado por Claudia en junio 29, 2009

A través de Pablo en Kabytes llegué a ViewLike.us, una singular aplicación web (que funciona con Ajax y PHP) que te permite probar tu sitio en distintas resoluciones de pantalla (pasando por 800×600, 1024×768, 1152×864, 1400×900, 1600×1200, 1920×1200 y vistas desde el iPhone y Wii) con un solo click de tu mouse.

Las aplicaciones como ésta cobran relevancia si consideramos el uso de pantallas cada vez más “anchas” y de mayores resoluciones posibles. Así, según W3Schools, el uso de la resolución 1024×768 píxeles fue de aproximadamente un 36% en enero de 2009, mientras que el uso de resoluciones más anchas (desde 1152×864 px en adelante) se elevó a un 57%.

Bajo el supuesto de que 1024×768 píxeles es la resolución más usada, se crean sitios que se ven bien en tal resolución, pero muy mal en otras. Un sitio completamente alineado a la izquierda no se ve mal, pero hay otros que se ven con partes cortadas, secciones mal alineadas, o que están construidos como si tuvieran un ancho fuido, cuando en realidad son fijos (toman el *width: 100%* como un equivalente absoluto a 1024 px).

1024×768 px ya no es precisamente la resolución de pantalla más usada (si comparamos “fullscreen” v/s “widescreen”). De ahí la necesidad de preocuparse no sólo por cómo se ve tu sitio en diferentes navegadores, sino también de cómo se ve en distintas resoluciones.

¿Ya probaste cómo se ve tu blog a través de otros ojos?

Tags:
Blogger

Crea un panel de acceso en tu blog de Blogger

Publicado por Claudia en junio 25, 2009

BoyProdx (vía Viet Blog Guide) nos enseña a añadir un sencillo widget de acceso/login para los blogs de Blogger, similar en apariencia a los que podemos poner en WordPress.

El código, para el widget en español, sería:

<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://draft.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fdraft.blogger.com%2F" name="continue" type="hidden"/>
<br/>
<div>
<label for="Email"> Cuenta: 
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>
</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Olvidé mi contraseña">?</a>) 
<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>
</div>
<br/><br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>
</form></div>

Debes pegar digo código en en un nuevo gadget de HTML/Javascript de la sección Diseño/Elementos de tu blog. Si quieres darle un poco más de “estilo”, puedes añadir un poco de CSS básico a tu plantilla:

#Email, #Passwd{
border: 1px solid #ff0084;
}
 
#signin-btn-ns { 
color: #FFF;
background: #FF55AA;
border: 1px solid #ff0084;
}

¿Simpático? A mí me parece una monería, pero puede ser bastante útil además de cómodo. El formulario trabaja en base al panel de acceso de Blogger, y como es posible darse cuenta, redirecciona al panel de Blogger in Draft. Ahora, si lo que quieres es que te lleve al panel tradicional de Blogger, deberás cambiar la url del input escondido que hace la redirección (mira el código del widget), quitando los dos “draft.” que aparecen allí para que en vez de ir a draft.blogger.com vayas a blogger.com.
Si no pudiste acceder a tu cuenta, ingresa tu e-mail de Gmail en “Cuenta” y tu contraseña en los campos correspondientes. Es un formulario que puedes usar tranquilamente, porque no almacena tus datos de acceso.

Tags: ,
Iconos

Templay: Descargas creativas para diseñadores

Publicado por Claudia en junio 24, 2009


A través de Deviantart, llegué a Templay, un nuevo y exclusivo sitio de freebies para diseñadores, webmasters y bloggers. No es un blog, sino más bien una “plataforma de medios creativos para tus proyectos”, como la definen los diseñadores gráficos, diseñadores web y programadores que hacen posible su mantención.

Sitios donde conseguir freebies hay muchos, pero me llama la atención la calidad, variedad y frescura de los recursos que ofrece (y pretende seguir ofreciendo) Templay: plantillas flash, temas WordPress, íconos y tutoriales.

La plataforma todavía está en beta, y disponible sólo en alemán (para una mejor experiencia, es mejor usar Google Translator). Al menos por ahora, todo es gratuito, y accesible sólo mediante el registro. Por supuesto, un sitio para seguir muy de cerca.

Tags: ,
Blogger

Blogger: el primer post con un estilo diferente

Publicado por Claudia en junio 23, 2009

Desde hace un tiempo, me preguntaba cómo hacer que en Blogger el primer post se muestre distinto a los demás, de modo tal que éste tenga un estilo único que lo haga destacar sobre el resto.

Actualmente, Blogger está añadiendo nuevos códigos (y posibilidades) a sus plantillas, que al parecer van de la mano con su aniversario número 10. Así, por ejemplo, se rumorea (con bases muy certeras) la posibilidad de inclusión de un hack que permite acortar los posts, y que es análogo a la función “more” de WordPress.

La última gran novedad, es la inclusión de un nuevo código condicional que hace posible definir un estilo distinto y único sólo para el primer post:

 <b:if cond='data:post.isFirstPost'> contenido </b:if>

Este código puede ser de gran utilidad para destacar el título del primer post (como muestra Ro en Bloggersphera), conseguir que un determinado hack (por ejemplo, “leer más con thumbnails“) se aplique sólo al primer post, o destacar el post completo al estilo de los “featured posts” de WordPress.

Los condicionales de Blogger son apliamente usados para aplicar hacks o crear plantillas tipo Magazine, galerías de imágenes. Por ejemplo:

  • Para mostrar sólo en la página principal
<b:if cond='data:blog.pageType == "index"'> contenido </b:if>
  • Para mostrar en un post individual
<b:if cond='data:blog.pageType == "item"'> contenido </b:if>

*Podrían cumplir funcionales análogas al index.php y el single.php de WordPress, respectivamente.

Estos tres códigos condicionales básicos expanden las posibilidades de Blogger, y lo llevan a niveles insospechados hasta hace quizá un par de años. Si quieres adentrarte en su uso, puedes revisar el excelente tutorial de Vagabundia que explica el uso avanzado de condicionales.

Por ahora, el uso de condicionales para el primer post da para detenerse un rato a probar y experimentar, porque no es un ejercicio realmente simple (aunque sí puede tener resultados muy satisfactorios). Sigo haciendo mis propios experimentos.

Tags: , , ,