Función "permalink" con Javascript
Francisco 02-02-07
Programación : Ruby on Rails
permalink

Desarrollando una web con Ruby on Rails me he encontrado con un problema relacionado con los permalink y la codificación de caracteres UTF-8.

He aquí lo bueno de cada uno de estos tres elementos:

  • Con RoR el desarrollo de una web está muy bien estructurado pero sin que ello menoscabe la flexibilidad o la potencia.
  • Con los permalink tenemos una dirección URL mucho más descriptiva; menos críptica. Por ejemplo, ver en la barra de direcciones del navegador web:
    "pelicula/la_guerra_de_las_galaxias"
    es mucho mejor que ver  "pelicula?id=3230"
    y además es mejor para el posicionamiento de la web en Google. Para hacer un permalink hay que evitar los espacios en blanco, los acentos y en general los caracteres "extraños".
  • Con la codificación UTF-8 se puede representar los caracteres de los alfabetos de muchas lenguas del Mundo. Hay que configurar RoR correctamente para que codifique la página HTML en UTF-8.
A fin de cuentas, lo que necesitaba era convertir el título de un artículo a su representación permalink de la forma más automática posible, sin intervención del operador. He encontrado soluciones en Internet pero en todas trataban de forma incompleta el tema de los acentos. Para verlo más claro veamos un ejemplo:
  • "La cañería está rota" sería el título del artículo
  • "la-caera-est-rota" sería el permalink que no respeta acentos.
  • "la_caneria_esta_rota" es el permalink que quiero obtener (Me gusta más el guión bajo que el guión normal para indicar los espacios en blanco).

He aquí las soluciones posibles que he encontrado para crear un permalink automáticamente a partir del título del artículo:

Solución RoR

Se trata de agregar el método before_save en el modelo de la tabla artículos. Dicho método guardaría el campo título en el campo permalink. He aquí el código:

class Article < ActiveRecord::Base
   def before_save 
     result = self.title.downcase
     result.gsub!(/[áàäâå]/, 'a') 
     result.gsub!(/[éèëê]/, 'e')
     result.gsub!(/[íìïî]/, 'i')
     result.gsub!(/[óòöô]/, 'o')
     result.gsub!(/[úùüû]/, 'u')
     result.gsub!(/[ýÿ]/, 'y')
     result.gsub!(/[ñ]/, 'n')
     result.gsub!(/[ç]/, 'c')
     result.gsub!(/['"]/, '')
     result.gsub!(/[^a-zA-Z0-9-]/, ' '); #result.gsub!(/W/, ' ')
     result.gsub!(/ +/, '_')
     result.gsub!(/(_)$/, '')
     result.gsub!(/^(_)/, '')
     self.permalink = result
   end  
 end

Pero Ruby no me compila archivos .rb codificados con UTF-8. En cambio en las plantillas .rhtml la codificación UTF-8 proporciona grandes ventajas ya que ahora me deja escribir directamente los acentos que antes me salían como un rombo negro con un interrogante.

Codificación UTF-8

Para guardar un archivo de texto con codificación de caracteres UTF-8 utilizo uno de estos programas:

  • El editor de software libre Notepad++ tiene la siguiente opción Menu → Formato → Codificar en UTF-8
  • En el el entorno de desarrollo Aptana (basado en Eclipse) hay que ir a Menu → Ventana → Preferencias → General → Editores → Codificación archivo de texto → Otro → UTF-8

Solución JavaScript

He aquí el código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio permalink</title>
<script type="text/javascript">

function permalink(origen, destino)
{  
  var text = document.getElementById(origen).value.toLowerCase(); // without 'prototype' library 
  //var text = $(origen).value.toLowerCase(); // with 'prototype' library
  text = text.replace(/[áàäâå]/g, 'a');
  text = text.replace(/[éèëê]/g, 'e');
  text = text.replace(/[íìïî]/g, 'i');
  text = text.replace(/[óòöô]/g, 'o');
  text = text.replace(/[úùüû]/g, 'u');
  text = text.replace(/[ýÿ]/g, 'y');
  text = text.replace(/[ñ]/g, 'n');
  text = text.replace(/[ç]/g, 'c');
  text = text.replace(/['"]/g, '');
  text = text.replace(/[^a-zA-Z0-9-]/g, ' '); //text = text.replace(/\W/g, ' ');
  text = text.replace(/\s+/g, '_');
  text = text.replace(/(_)$/g, '');
  text = text.replace(/^(_)/g, '');  
  document.getElementById(destino).value = text; // without 'prototype' library 
  //$(destino).value = text; // with 'prototype' library
  return false;
}

</script>
</head>
<body>
<h1>Ejercicio <strong>permalink</strong></h1>
<form>
  <p>Valor: <input type="text" id="article_title" value="  ¿Pero 23% qué__   utopía éste  es esto?  " size="80" /></p>
  <p><input type="button" onclick="return permalink('article_title','article_permalink');" value="Crear permalink" /></p>
  <p>Permalink: <input type="text" id="article_permalink" value="" size="80" readonly="readonly" /></p>
</form>
</body>
</html>

 

Y aquí está el código en funcionamiento:

Valor:

Permalink:




Un comentario:

1 → hayden (no registrado) dice hace 10 meses:

thankyou x 1000000000!!

Añade tu comentario:

(El correo no será publicado)