Por las afueras de las oficinas de Barranco pasa el tranvía.

Cuando decimos que trabajamos on rails lo decimos en serio jeje.

Para muestra una fotito ;-)

RailsConf 2007 Presentations, diapositivas de la RailsConf 2007 ofrecidas en Mayo del presente en Portland, Oregon.

Implementando una aplicación Rails

Ruby on Rails Caching Tutorial - part 1

Ruby on Rails Caching Tutorial - part 2

Una de las cosas que más me ofuscaban de trabajar con formularios en Rails era la devolución de errores que etiquetaba los campos de datos con un DIV usando un class=”fieldWithErrors”.

Digamos que si teníamos en nuestra vista lo siguiente:

<p><label for="contacto_nombre">Nombre completo:</label> 
 <%= text_field 'contacto', 'nombre', :maxlength => 40 %> *</p>

Y al procesar el formulario ocurría un error en este campo, Rails generaba como salida lo siguiente:

<p><label for="contacto_nombre">Nombre completo:</label></p>
<div class="fieldWithErrors"><input id="contacto_nombre" maxlength="30" name="contacto[nombre]" size="30" value="" type="text"></div> *

Como podrán apreciar, cerraba el párrafo (p) luego de la etiqueta label, y a continuación generaba el div que albergaba al campo con errores. Esto originaba dos saltos de línea que malograba el maquetado inicial del formulario: uno luego del cierre de label y luego del cierre del div de error.

La solución para modificar este comportamiento lo encontré googleando en una lista de correo de Rails y le hice algunas modificaciones para hacerlo más flexible para el uso de css:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
    msg = instance.error_message
    error_class = 'error_field'
    if html_tag =~ /<(input|textarea|select)[^>]+class=/
        class_attribute = html_tag =~ /class=['"]/
        html_tag.insert(class_attribute + 7, "#{error_class} ")
    elsif html_tag =~ /<(input|textarea|select)/
        first_whitespace = html_tag =~ /\s/
        html_tag[first_whitespace] = " class='#{error_class}' " 
    end
    html_tag
end

Este trozo de código deben agregarlo al archivo /config/enviroment.rb. Lo que hace es comprobar si el campo con error ya tiene un atributo class, si es así le agrega al atributo ya existente otro valor con el nombre error_field, sino existe crea class=’error_field’. Para el ejemplo, la salida devuelta nos daría un marcado más flexible, limpio y fácil de manejar con css:

<p><label for="contacto_nombre">Nombre completo:</label> 
<input class="error_field" id="contacto_nombre" maxlength="30" name="contacto[nombre]" size="30" value="" type="text"> * </p>

Desde que mudé mi blog a Mephisto, alguna de las cosas que extrañaba de WordPress era el poder mostrar un hipervínculo al post anterior y posterior del post actual, tal y como lo usa Kubrick, tema por defecto de WordPress.

Ya que era un detalle que no quería dejar por alto en mi blog, decidí crear un plugin para Mephisto que haga esta tarea, lo he llamado Mephisto Previous Next Post Plugin, puede ser descargado desde este enlace

Usarlo es muy sencillo, luego de haber reiniciado tu blog, debes colocar el siguiente código Liquid en el template que muestra los post individuales:

{{ article | previous_next_post }}

Eso es todo, el plugin detectará el post anterior y siguiente, y generará un marcado tal como:

<div class="prev_next"><div class="prev" align="left">&laquo <a href="/2007/3/20/ruby-on-rails-en-el-developer-day">Ruby on Rails en el Developer Day</a></div><div class="next" align="right"><a href="/2007/3/26/mephisto-share-it-plugin">Mephisto Share It Plugin</a> &raquo;</div></div>

Pudes aplicarles los estilos que creas conveniente editando la hoja de estilos de tu template.

Puedes ver un ejemplo del plugin en funcionamiento al pie de este post.

Las herramientas del idioma de Google nos permiten traducir textos o páginas web de un idioma a otro, una manera de sacarles provecho en nuestros blogs es permitir que nuestros lectores puedan leer nuestros mensajes en otro idioma, por ejemplo el inglés.

Con Mephisto se nos facilitan las cosas, pues con solo ingresar una líneas de código en las plantillas Liquid podemos hacer que cada una de nuestras páginas web de index, secciones o post's puedan ser traducidas al inglés pasando la URL actual al traductor de Google. El código que yo uso para tal caso es el siguiente, y lo aplico a la plantilla layout.liquid de mi diseño actual:

{% if article %}
<a href='http://translate.google.com/translate?u=http%3A//www.willywg.com{{ article.url }}&langpair=es%7Cen&hl=es&ie=UTF-8&ie=UTF-8&oe=UTF-8&prev=/language_tools'>
Translate 
</a>
{% else %}
<a href='http://translate.google.com/translate?u=http%3A//www.willywg.com/{{ section.path }}&langpair=es%7Cen&hl=es&ie=UTF-8&ie=UTF-8&oe=UTF-8&prev=/language_tools'>
Translate
</a>
{% endif %} 

El primer condicional comprueba si nos encontramos dentro de un post (article), si es así agrega a la URL la dirección del post usando {{ article.url }}. En caso no sea un post se pasa a la URL el nombre de la sección activa mediante {{ section.path }}. Todo esto va concadenado a la URL que enlaza al traductor del Google en cuyo valor para u se pasa la URL actual de nuestro blog.

Yo lo he implementado en este blog, en la parte superior media verán que hay una bandera inglesa circular, si le dan click este mensaje se traducirá al inglés inmediatamente.

Espero que les sea de utilidad, que disfruten ;-)

[Ir a la documentación en Español]

What is this?

Mephisto Share It is a plugin that provides an unobtrusive way for your visitors to add your post to various social bookmarking sites.

Installation

1. Download the plugin archive from http://www.willywg.com/assets/2007/3/25/mephisto_share_it.rar
2. Unrar the file mephisto_share_it.rar and put the 'mephisto_share_it' folder into your vendor/plugins/ directory. Afterward, you should have a folder structure like this: vendor/plugins/mephisto_share_it/(a bunch of files).
3. Finally restart your application of mephisto.

Using

1. Personalizing. Open the mephisto_share_it.rb file in your vendor/plugins/mephisto_share_it/lib/ directory and change this data:

  HOST = 'http://www.willywg.com' #A. Change it for your  website
  #B. Activate the markers to use assigning them the true value and disable them with false
  #International Bookmarks 
  DELICIOUS = true
  DIGG = true
  TECHNORATI = true
  GOOGLE_BOOKMARKS = true
  YAHOO_MY_WEB = true
  MAGNOLIA = true
  #Hispanic Bookmarks
  MENEAME = false
  FLOREAME = false
  ENCHILAME = false
  WEBEAME = false

2. Drawing. Do this in your layout (for default values):

{{ article | share_it }}

This will generate:

Share It: »<a href="http://del.icio.us/post?url=http://www.willywg.com/2007/3/25/your_post&amp;title=YourPost" target="_blank">del.icio.us</a> »<a href="http://digg.com/submit?phase=2&amp;url=http://www.willywg.com/2007/3/25/your_post&amp;title=YourPost" target="_blank">Digg</a> »<a href="http://www.technorati.com/faves?add=http://www.willywg.com/2007/3/25/your_post" target="_blank">Technorati</a> »<a href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http://www.willywg.com/2007/3/25/your_post&amp;title=YourPost" target="_blank">Google Bookmarks</a> »<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.willywg.com/2007/3/25/your_post&amp;t=YourPost" target="_blank">Yahoo My Web</a> »<a href="http://ma.gnolia.com/bookmarklet/add?url=http://www.willywg.com/2007/3/25/your_post&amp;title=YourPost" target="_blank">Ma.gnolia</a>

Or use:

{{ article | share_it: 'Share this post','' }}

This will generate:

Share this post <a href="http://del.icio.us/post?url=http://www.willywg.com/2007/3/21/hola&amp;title=Hola" target="_blank">del.icio.us</a> <a href="http://digg.com/submit?phase=2&amp;url=http://www.willywg.com/2007/3/21/hola&amp;title=Hola" target="_blank">Digg</a> <a href="http://www.technorati.com/faves?add=http://www.willywg.com/2007/3/21/hola" target="_blank">Technorati</a> <a href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http://www.willywg.com/2007/3/21/hola&amp;title=Hola" target="_blank">Google Bookmarks</a> <a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.willywg.com/2007/3/21/hola&amp;t=Hola" target="_blank">Yahoo My Web</a> <a href="http://ma.gnolia.com/bookmarklet/add?url=http://www.willywg.com/2007/3/21/hola&amp;title=Hola" target="_blank">Ma.gnolia</a>

3. If you want to use the bookmarkers separately you can make it in the following way:

{{ article | link_to_delicious }}

{{ article | link_to_delicious: 'Bookmark this with del.icio.us' }}

Same way with link_to_digg, link_to_technorati, link_to_google_bookmarks, link_to_yahoo_my_web, link_to_magnolia, link_to_meneame, link_to_floreame, link_to_enchilame and link_to_webeame

Adding a bookmarker

This is simple

1. Add a bookmarker with the true value:

MY_BOOKMARKER = true

2. Create a function:

def link_to_my_bookmarker(article, text = nil)
    url = 'http://my-bookmarker.com/post?' #the url of the bookmarker site
    url += "url=#{HOST}#{article['url']}&title=#{article['title']}" #the values by get
    content_tag :a, text || 'My Bookmarker', :href => url, :target => '_blank' #the tag A generated with the Bookmarker name 
end

3. Adds the following line in the share_it function:

links += pre + link_to_my_bookmarker(article) + ' ' if MY_BOOKMARKER

[Go to English documentation]

¿Qué es?

Mephisto Share It es un plugin que permite que tus visitantes agreguen tus mensajes publicados (posts) a los marcadores de noticias más conocidos.

Instalación

1. Descárgate el plugin desde http://www.willywg.com/assets/2007/3/25/mephisto_share_it.rar
2. Descomprime el archivo mephisto_share_it.rar y copia la carpeta 'mephisto_share_it' en la ruta vendor/plugins/ quedando de la siguiente manera: vendor/plugins/mephisto_share_it/.
3. Finalmente reinicia tu aplicación de mephisto.

Uso

1. Personalizando. Abre el archivo mephisto_share_it.rb localizado en el directorio vendor/plugins/mephisto_share_it/lib/ y edita los siguientes datos:

  HOST = 'http://www.willywg.com' #A. Cámbialo por tu website
  #B. Activa los marcadores que usarás asignándoles el valor true y desactívalos con false
  #Marcadores Internacionales
  DELICIOUS = true
  DIGG = true
  TECHNORATI = true
  GOOGLE_BOOKMARKS = true
  YAHOO_MY_WEB = true
  MAGNOLIA = true
  #Marcadores Hispanos
  MENEAME = false
  FLOREAME = false
  ENCHILAME = false
  WEBEAME = false

2. Mostrando. Agrega este código en tu diseño (para valores por defecto):

{{ article | share_it }}

Esto generará:

Share It: »<a href="http://del.icio.us/post?url=http://www.willywg.com/2007/3/25/your_post&amp;title=YourPost" target="_blank">del.icio.us</a> »<a href="http://digg.com/submit?phase=2&amp;url=http://www.willywg.com/2007/3/25/your_post&amp;title=YourPost" target="_blank">Digg</a> »<a href="http://www.technorati.com/faves?add=http://www.willywg.com/2007/3/25/your_post" target="_blank">Technorati</a> »<a href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http://www.willywg.com/2007/3/25/your_post&amp;title=YourPost" target="_blank">Google Bookmarks</a> »<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.willywg.com/2007/3/25/your_post&amp;t=YourPost" target="_blank">Yahoo My Web</a> »<a href="http://ma.gnolia.com/bookmarklet/add?url=http://www.willywg.com/2007/3/25/your_post&amp;title=YourPost" target="_blank">Ma.gnolia</a>

O usa:

{{ article | share_it: 'Compártelo: ','' }}

Esto generará:

Compártelo: <a href="http://del.icio.us/post?url=http://www.willywg.com/2007/3/21/hola&amp;title=Hola" target="_blank">del.icio.us</a> <a href="http://digg.com/submit?phase=2&amp;url=http://www.willywg.com/2007/3/21/hola&amp;title=Hola" target="_blank">Digg</a> <a href="http://www.technorati.com/faves?add=http://www.willywg.com/2007/3/21/hola" target="_blank">Technorati</a> <a href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http://www.willywg.com/2007/3/21/hola&amp;title=Hola" target="_blank">Google Bookmarks</a> <a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.willywg.com/2007/3/21/hola&amp;t=Hola" target="_blank">Yahoo My Web</a> <a href="http://ma.gnolia.com/bookmarklet/add?url=http://www.willywg.com/2007/3/21/hola&amp;title=Hola" target="_blank">Ma.gnolia</a>

3. Si deseas usar los marcadores de manera separada puedes hacerlo de la siguiente manera:

{{ article | link_to_delicious }}

{{ article | link_to_delicious: 'Márcalo con del.icio.us' }}

Puedes hacerlo de la misma manera con link_to_digg, link_to_technorati, link_to_google_bookmarks, link_to_yahoo_my_web, link_to_magnolia, link_to_meneame, link_to_floreame, link_to_enchilame y link_to_webeame

Agregando un marcador

Es muy simple hacelo:

1. Agrega un nombre de marcador y asígnale un valor true:

MI_MARCADOR = true

2. Crea la función que llame al marcador:

def link_to_mi_marcador(article, text = nil)
    url = 'http://mi-marcador.com/post?' #La dirección web del marcador
    url += "url=#{HOST}#{article['url']}&title=#{article['title']}" #Los valores pasados por el método get
    content_tag :a, text || 'Mi marcador', :href => url, :target => '_blank' #La etiqueta que generará el marcador
end

3. Agrega la siguiente línea de código en la función share_it:

links += pre + link_to_mi_marcador(article) + ' ' if MI_MARCADOR