Archivos mensuales: mayo 2010

Eliminar ‘category’ de la URL en WordPress

Hoy es un día de pequeñas anotaciones. La siguiente es una cuestión que me tuvo bastante tiempo googleando y finalmente la respuesta llegó a través de Bioxid, CTO de Mecus, al que tengo que agradecer su tiempo y buen hacer por darme la respuesta.

Como sabéis, al utilizar WordPress si no especificamos una categoría base por defecto, delante de todas las categorías aparece en la URL la palabra category. Particularmente es algo que detesto y para el nuevo diseño que estoy haciendo para este blog, me sobra por completo esa palabra en la URL. Así que, ¿cómo la quitamos?

Bastaría con instalar un simple plugin, WP No Category. Sin más. Si sois como yo, de los que prefieren hacer algo manualmente antes que con un plugin os recomiendo que por una vez no os compliquéis la existencia. Esto en concreto lo intenté mediante la modificación del htaccess y no me dio buenos resultados.

Añadir un nuevo bundle a Textmate

Habitualmente uso Textmate para desarrollar en Mac. No es el único (Coda, CSSEdit para maquetación, … ) y muchos dirán que no el mejor (en lo que yo discreparía), pero está bastante extendido. Lo cierto es que a mí Textmate me va genial para maquetación y desarrollo en Rails. En realidad instalar un bundle es de los más sencillo, pero siempre olvido dónde debo hacerlo, será la edad. Así que aprovecho y lo dejo por aquí.

¿Qué es un bundle?

Son funcionalidades específicas sobre un lenguaje concreto que podemos importar en Textmate. Son útiles para agilizar el tiempo de desarrollo y escribir más en menos tiempo. Cuando acabas acostumbrándote a ellos es lo mejor ya que muchas veces los desarrolladores web, como sabéis, tendemos a repetir estructuras de código una vez las tenemos asimiladas, ya que nos encontramos cómodas con ellas.

¿Donde conseguimos nuevos bundles?

O bien los encuentras mediante buscador o bien puedes utilizar GitHub, utilizado para alojar repositorios de código.

Vale, ya tengo mi bundle, ¿ahora cómo lo instalo?


mkdir -p /Library/Application\ Support/TextMate/Bundles
cd /Library/Application\ Support/TextMate/Bundles

Y ahí clonamos el repositorio que queramos, usando SVN o git, como es mi caso. Recuerda que antes de poder utilizarlo debes recargar los bundles, lo que puedes hacer desde consola o bien para más comodidad, desde el propio Textmate.

Botones y links para compartir contenido

En un nuevo proyecto en el que estoy trabajando he tenido que incluir botones y enlaces para compartir los artículos que creará el administrador de la web. Gracias a estos enlaces o botones los visitantes de la web podrán enviar el artículo a Facebook, Twitter, Linkedin, Google Buzz, etc… os dejo con la recopilación de enlaces, esperando que os resulte de utilidad.

¿Los usamos todos? Deberíamos pararnos un poco a pensar si realmente nos serán necesarios. Si tu contenido es “pro” quizás te interese más Twitter y Linkedin. Si no lo es tanto y es un contenido más generalista, quizá todos menos Linkedin. Cuestión de probar, también. Total, vamos al lío, que me enrollo.

Twitter

No pude encontrar la documentación oficial de Twitter (si alguien tiene a bien pasar la url le estaré agradecido), pero integrar un botón para compartir en Twitter es bastante sencillo.


<a href="http://twitter.com/homestatus=mensaje_que_saldra_antes_del_enlace%20url_del_articulo" title="Comparte la noticia"/>Compartir en Twitter</>

Creo que se entiende bien. En lugar de “mensaje_que_saldra_antes_del_enlace” deberás poner cualquier cosa, por ejemplo “Quizás esto te interese: ” o “Lee esto que mola un cacho”.


Facebook

Gracias a un sencillo formulario podremos crear nuestro botón de “Me gusta” para integrarlo en nuestra web. Facebook ha tomado gran relevancia los últimos tiempos y se revela como un medio muy potente donde dar a conocer nuestros artículos. Lo que no me gusta es que el código generado es un iframe, y tratándose del gran caralibro, ya podrían habérselo currado un poco más.

¿necesitas más información?


Google Buzz

Sí, todavía existe. Podrás crear botones y enlaces de una forma sencilla y rápida. Te ofrece tres tipos de estilo: Botón y contador, sólo botón y enlace. Basta con añadir un enlace y un script a nuestra página. Poco más.

¿necesitas más información?


Linkedin

Éste fue el caso más curioso de todos. Cuando estamos en desarrollo, en mi caso, mi entorno de prueba apunta a http://localhost:3000. Al hacer click en el enlace una vez generado me mostraba un error y era porque Linkedin es listo y no te deja compartir enlaces a localhost. ¿Qué ocurre? Que el mensaje de error no era muy amigable y hasta que te das cuenta de qué está ocurriendo, pasa un buen rato.

http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={articleTitle}&summary={articleSummary}&source={articleSource}

¿necesitas más información?


Vale, todo esto está muy bien, pero…¿cómo ahorramos algo de tiempo y de ruido visual en Rails? Aquí entran en juego nuestros amigos los helpers.

Helpers para generar botones de compartir contenido

Aquí debo agradecer a Ceritium la ayuda, prácticamente los helpers que veréis aquí detallados los hizo él.

Bastaría colocar los helpers en el controlador que nos convenga. Imaginemos que queremos compartir noticias (news). ¿Donde queremos llevar al usuario al hacer click? Al show de la noticia en cuestión – news_url(news). ¿Donde colocamos el helper? Pues en news_helpers.


def share_on_twitter
  link_to content_tag(:span,'Twitter'), "http://twitter.com/homestatus=Te%20recomiendo%20que%20leas%20#{news_url(news)}", :title => "Comparte en Twitter"
end

def share_on_buzz
  link_to content_tag(:span,'Google Buzz'),"http://www.google.com/buzz/post", :title => "Comparte en Google Buzz", :class => "google-buzz-button", "data-button-style" => "link", "data-locale" => "es"
end

# Nota: headline (título de la noticia), summary (resumen de la noticia).
def share_on_linkedin(news)
  url = 'http://www.linkedin.com/shareArticle?mini=true'
  url << "&url=#{news_url(news)}"
  url << "&title=#{news.headline}"
  url << "&summary=#{truncate(news.summary, :length => 200)}"
  link_to content_tag(:span,'Linkedin'), url
end

En el caso de Facebook preferí meter el iframe directamente en el show, por ahorrarme tiempo. Pero os animo a crear un helper vosotros mismos :)

Yaml sin @import: adaptando un framework CSS

Actualmente, en la empresa en la que trabajo (Flowers in Space), utilizamos YAML para nuestros desarrollos. Mucho se ha debatido sobre usar o no usar un framework, pero no es lo que nos ocupa ahora. En nuestro caso os puedo decir que agiliza nuestros desarrollos, más adelante es posible que me extienda un poco más sobre el asunto y os doy pros y contras con detalle.

Lamentablemente, aunque nos gusta mucho y nos sentimos cómodos con él, sólo le veíamos una pega, y es que para cargar todas las hojas de estilo de las que hace uso utiliza @import. Hace ya algún tiempo Anieto2k, uno de mis blogs de cabecera, nos explicaba los beneficios de no usar @import. En resumen nos viene a contar que utilizar la etiqueta link permite que todos los ficheros CSS se carguen de forma simultánea.

Así que con el fin de utilizarlo en nuestros futuros proyectos he echado un rato en quitar todos los import de Yaml y a la vez, crear una estructura de directorios intuitiva, con la que nos sintamos cómodos y que nos permita actualizarlo rápidamente a las nuevas versiones del framework. A falta de un nombre mejor lo denominaré YamlMod.

Consideraciones previas

A destacar: esta modificación de Yaml atiende a necesidades propias. ¿Qué quiero decir con esto?

  • YamlMod está actualizado a la versión 3.2.1 (revisión 392) de Yaml: intentaré mantenerlo actualizado, sobre todo si veo que tiene buena acogida la idea.
  • Addons que trae por defecto Yaml eliminados: no hacemos uso de ellos, pero podéis incorporarlos vosotros manualmente sin ningún inconveniente.
  • forms.css de Yaml eliminado: nosotros utilizamos Formtastic, que trae su propia hoja de estilos.
  • División entre admin y application: nuestros desarrollos los realizamos en Ruby on Rails. Solemos utilizar dos layouts para dividir la zona de administración y la parte pública, así que he mantenido esto en la modificación de Yaml.
  • Utilizamos el lenguaje de marcado Haml para describir nuestro xHTML: os explico esto porque a continuación os indico cómo realizar la carga hojas de estilo.

Cómo importar YamlMod

¿Cómo quedaría nuestro application.html.haml? Aquí tenéis un ejemplo, con algunas líneas comentadas (las que no solemos utilizar nosotros tan a menudo). Ojito con la indentación si vas a copiar el código y pegarlo en algún sitio.


/Stylesheets
= stylesheet_link_tag 'reset','core/base_all', :media => "all"
= stylesheet_link_tag 'core/base_screen', :media => "screen,projection"
/= stylesheet_link_tag 'core/base_print', :media => "print"
        
= stylesheet_link_tag 'screen/application/basemod', :media => "screen,projection"
= stylesheet_link_tag 'screen/application/content', :media => "all"
    
/Si quieres incluir la navegación pestañas de YAML, descomenta la línea siguiente
/= stylesheet_link_tag 'navigation/nav_shinybuttons', :media => "all"
    
/ Incluir aquí el tipo de print.css necesario, si procede
/ Más info: http://www.yaml.de/en/documentation/css-components/layout-for-print-media.html
/= stylesheet_link_tag 'print/print_123', :media => "print"
    
/[if lte IE 7]
  = stylesheet_link_tag 'patches/iehacks_all', :media => "all"
  = stylesheet_link_tag 'patches/iehacks_screen', :media => "screen,projection"
  /= stylesheet_link_tag 'patches/iehacks_print', :media => "print"
  /Si quieres incluir la navegación pestañas de YAML, descomenta esta línea
  /= stylesheet_link_tag 'patches/patch_nav_vlist',  :media => "screen,projection"
  / descomenta la siguiente línea si has incluido algún parche personal para
  /= stylesheet_link_tag 'patches/application_patches', :media => "all"

¿Cómo quedaría nuestro admin.html.haml?


/Stylesheets
= stylesheet_link_tag 'reset','core/base_all', :media => "all"
= stylesheet_link_tag 'core/base_screen', :media => "screen,projection"
/= stylesheet_link_tag 'core/base_print', :media => "print"
        
= stylesheet_link_tag 'screen/admin/basemod', :media => "screen,projection"
= stylesheet_link_tag 'screen/admin/content', :media => "all"
    
/Si quieres incluir la navegación pestañas de YAML, descomenta la línea siguiente
/= stylesheet_link_tag 'navigation/nav_shinybuttons', :media => "all"
    
/ Incluir aquí el tipo de print.css necesario, si procede
/ Más info: http://www.yaml.de/en/documentation/css-components/layout-for-print-media.html
/= stylesheet_link_tag 'print/print_123', :media => "print"
    
/[if lte IE 7]
  = stylesheet_link_tag 'patches/iehacks_all', :media => "all"
  = stylesheet_link_tag 'patches/iehacks_screen', :media => "screen,projection"
  /= stylesheet_link_tag 'patches/iehacks_print', :media => "print"
  /Si quieres incluir la navegación pestañas de YAML, descomenta esta línea
  /= stylesheet_link_tag 'patches/patch_nav_vlist',  :media => "screen,projection"
  / descomenta la siguiente línea si has incluido algún parche personal para
  /= stylesheet_link_tag 'patches/admin_patches', :media => "all"

Espero que el recurso os sea de utilidad.

>> Descargar YamlMod ( Yaml versión 3.2.1 revisión 392 )