Una de las cosas que más me molestaba 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 otro luego del cierre del div de error.

Solucionando el problema

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 de las siguiente forma:

<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>

Espero que estos tips les sirvan al momento de crear formularios utilizando Rails, para comprender mejor sobre los términos expuestos les recomiendo las siguientes lecturas:

• Introducción a Ruby on Rails
• Ruby on Rails vs PHP: una falsa comparación
• Los programadores de PHP están interesados en migrar a Rails

Este artículo es una colaboración del autor, publicado originalmente en willywg.com por William Wong Garay.

Lo que pretendo a través del siguiente artículo es enseñar a nivelar dos capas (etiquetadas con DIV). Por ejemplo una capa derecha, que contenga enlaces y bloques de un sitio web, y una capa principal, que contenga artículos puedan nivelar sus alturas independientemente de cual de ellas sea más alta que la otra.

Existen otras formas de hacerlo como las tradicionales tablas que constan de columnas y filas que permiten nivelas los contenidos, pero vamos a aprender hacerlo de otra forma para obtener el siguiente resultado:

Maquetación del ejemplo

Para el ejemplo colocaremos dentro de las etiquetas body el siguiente maquetado:

<div id="contenedor">
    <div id="columna" class="col">
        test<br />
        test<br />
        test<br />
        test<br />
    </div>
    <div id="contenido" class="cont">
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
    </div>
</div>

Pueden notar que el contenido de columna tiene menos texto que el de contenido, en otras palabras será menos alto que esta última.

Aplicando los estilos

El primer paso será generar nuestra hoja de estilos, la cual consta de una capa contenedora a la que llamaremos contenedor. Además, dos capas flotantes, una a la derecha denominada: columna. La otra a la izquierda denominada: contenido. Los atributos que colocaremos a cada capa serán los siguientes:

<style type="text/css">
    #contenedor{
        width: 300px;
        float: none;
        clear: both;
    }
    #columna{
        background-color:#FFCC99;
        width: 90px;
        float: right;
    }
    #contenido{
        background-color:#66FFCC;
        width: 190px;
        float: left;
    }
</style>

Lo que hicimos es básicamente posicionar las capas y aplicarle un color de fondo. Si ahora cargamos nuestra web en el navegador veremos que se mostrará con las capas desniveladas en altura.

Qué es JQuery

JQuery es una librería de JavaScript rápida y concisa que simplifica el trabajo con documentos HTML, maneja eventos, realiza animaciones, y agrega interacciones de Ajax en tus páginas web. JQuery ha sido diseñado para cambiar tu forma de escribir JavaScript.

Aplicando el JQuery

Para nivelar las columnas debemos usar JavaScript, para este ejemplo usaré una librería llamada JQuery. La librería de JQuery la pueden descargar desde su sitio web. El código que usaremos para nivelar las capas es el siguiente:

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        if ($("div#columna").height() > $("div#contenido").height()) {
            $("div#contenido").height($("div#columna").height())
        }else{
            $("div#columna").height($("div#contenido").height())
        }
    });
</script>

En la primera línea llamamos a la librería jqueri.js. Luego llamamos al evento ready() que es muy similar al windows.onload, es decir, no permite que ninguna función sea ejecutada a menos de que el DOM este listo para usarse.

Lo que hacemos en el condicional es comprobar si el alto de la capa columna es mayor que el alto de la capa contenido, si es así le asignamos a esta última el alto de la capa columna, en caso contrario hacemos lo opuesto. Para todo esto hacemos uso de la propiedad height() que nos calcula el alto de la capa, y de height(valor) para asignarle una altura.

Como ven el código no es muy complejo, como es obvio es posible de hacerse también con JavaScript puro, opté por jQuery porque lo estoy usando en el rediseño del sitio web de mi empresa.

Este artículo es una colaboración del autor el cual fue publicado originalmente en willywg.com por William Wong Garay.

Los que programamos en PHP, o bajo cualquier otro lenguaje de programación orientado a web, por lo general tendemos a pasar datos de una web origen a otra destino mediante variables del tipo GET generando enlaces tal como:

http://www.tiperu.com/index.php?mod=ecommerce&producto=tienda&op=3 que difícilmente son indexadas por algunos buscadores y lo que es peor aún: son nada asimilables por un usuario común (a este grupo de URL las llamaremos URL extensas para efectos del presente artículo).

Si lo vemos desde esa perspectiva justo sería afirmar que las web dinámicas tienen desventajas en ese ámbito sobre las web estáticas del tipo http://www.tiperu.com/ecommerce.html que son mucho más fáciles de recordar por su simpleza y carencia de variables vía GET, a este tipo de URL las conocemos (y me referiré a ellas en adelante) como URL amigables.

Quiero dejar en claro que lejos de la división convencional entre lo que son web estáticas o dinámicas en este manual me referiré a ambas en función a la diferencia de URL especificadas en el párrafo anterior  hecha la aclaración continuo con el artículo.

Felizmente para los que usamos Apache como servidor web, conjuntamente con PHP, esto tiene solución gracias al módulo mod_rewrite (URL Rewriting Engine) que nos permitirá mediante unas cuantas reglas transformar nuestras URL extensas en URL amigables.

Si bien es altamente aconsejable aprender el correcto manejo del mod_rewrite y sus correspondientes reglas, en este artículo no se hará explicación extensiva del mismo.

Debido a que el objetivo principal, es mostrar al lector cómo optimizar una web de URL extensas a URL amigables; con esto quiero dejar claro que se asume que el lector posee un website ya creado con URL extensas y desea pasarlas fácilmente a URL amigables “en un dos por tres”.

Preparando el archivo “.htaccess”:

El archivo .htaccess nos permite pasarle información al servidor Apache para que cumpla ciertas reglas de configuración en la carpeta que lo contenga, por tal motivo debemos copiar este archivo en la carpeta que contengan los archivos php en los cuales realizaremos los cambios de URL:

Options +FollowSymLinks
RewriteEngine on
#4 variables
Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5&$6=$7&$8=$9
#3 variables
Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5&$6=$7
#2 variables
Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5
#1 variable
Rewriterule ^(.*)/(.*),(.*)/$ $1.php?$2=$3

En las dos primeras líneas nos aseguramos de que esté activado el mod_rewrite en el Apache (si esto no funciona deberá comunicarse con su administrador para que active el módulo en el servidor).

Las líneas antecedidas por “#”, como las 3, 5, 7 y 9 ; son simplemente comentarios, no los tome en cuenta.

En las líneas 4, 6, 8 y 10 se establecen las reglas que nos permitirán transformar nuestras URL extensas en amigables. Analizaremos aquella que permite transformar dos variables, las demás son similares:

Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5

La expresión (Rewriterule) es la que nos permitirá escribir la regla en el Apache. La cadena (^(.*)/(.*),(.*)/(.*),(.*)/$) permite escribirá la URL amigable, inicia desde el caracter ^ hasta el $. Y finalmente la cadena ($1.php?$2=$3&$4=$5) es nuestro URL extenso. La transformación se hará de la siguiente manera:

De URL extensa:

./index.php?categoria=monitores&productoID=12345

En URL amigable:

./index/categoria,monitores/productoID,12345/

Como se puede apreciar la regla tomara el nombre del script y le quitara la extensión “.php” para tomarlo como un directorio (nótese la parte en negritas):

Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5

./index.php?categoria=monitores&productoID=12345
./index/categoria,monitores/productoID,12345/

Seguidamente toma el primer par ?valor=variable y lo transfroma en una subcarpeta valor,variable/:

Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5

./index.php?categoria=monitores&productoID=12345
./index/categoria,monitores/productoID,12345/

Y finalmente hace lo propio con el par &valor=variable y lo transforma en una subcarpeta valor,variable/:

Rewriterule ^(.*)/(.*),(.*)/(.*),(.*)/$ $1.php?$2=$3&$4=$5

./index.php?categoria=monitores&productoID=12345
./index/categoria,monitores/productoID,12345/

Como ya se habrá dado cuenta, los valores antecedidos por el símbolo dólar ($) en la parte de las URL extensas reemplazan a los (.*) de las URL amigables.

Bueno ya tenemos el archivo .htacces que nos permitirá lograr los resultados que deseamos a nivel del servidor, ahora procederemos a crear el script php que nos permita cambiar nuestras URL extensas en amigables sin tener que hacer ninguna modificación directa en los “N” enlaces que posea nuestro sitio web.

Generando el script en php:

El script php que se usaremos se encargará básicamente de tomar la URL extensa, si esta ha sido pasada mediante el método GET, y la transformará en una URL amigable a la cual redireccionará usando la función header.

Puesto que header redireccionará hacia la misma web, y esto causará lo que se conoce como un bucle infinito, se hará uso de variables de sesión que nos ayuden a evitar tal inconveniente.

Por tal motivo nuestro script se seccionará en 2 partes: la primera irá en las primeras líneas de todas las páginas a las que aplicaremos el script, y la segunda parte (encargada de limpiar la variable de sesión) irá al final de las páginas.

Aclarados los detalles, explicaré mediante comentarios el script php:

<?php

//Iniciamos o continuamos la sesión encargada de evitar el bucle infinito

	session_name("url_amigable");
	session_start(); //Almacenamos datos del server, script y variables (pasadas por GET)
	$Server=$_SERVER[´SERVER_NAME´];
	$Script=$_SERVER[´PHP_SELF´];
	$Variables=$_SERVER[´QUERY_STRING´]; //Verificando si tiene variables por GET

//y no se han pasado datos mediante un form por POST, ya que al redireccionar un post puede ocasionar errores.
//también verificamos que la variable de sesión ‘Listo’, sea diferente a 1, esto nos eviara un bucle infinito.

	if(!empty($Variables) & $_SERVER[’REQUEST_METHOD’]==’GET’ && $_SESSION[’Listo’]!=1){

//Si tiene variables pasadas por GET se procede a hacer el cambio.
//1. Agrupando $Variables por “variable=valor” en el array $Variable.

$Variable=explode(”&”,$Variables);
//2. Sustituyendo “=” por “,” y concadenandolo en variable $Amigable.
($i=0; $i < count($Variable); $i++){
$Amigable.="/".str_replace("=",",",$Variable[$i]);
} //3. Quitando la extension “.php” a $Script para simular un directorio.

$Dir=str_replace(”.php”,”",$Script); //4. Generando la URL Amigable.
$URL_AMIGABLE=”http://”.$Server.$Dir.$Amigable.”/”;
//5. Colocando la variable de sesión ‘Listo’ a 1 para evitar el bucle infinito al redireccionar la web.

$_SESSION[’Listo’]=1;
//6. Redireccionando a la url amigable

header(”Location: $URL_AMIGABLE”);
//7. Exit hará que culmine hasta este punto el script, si no estuviera ‘exit’el script continuaría ejecutándose y llegaría hasta el final del mismo, es decir,
// a la parte donde colocamos a la variable de sesión ‘Listo’ en cero, originándose, entonces un bucle infinito.
exit;

}//Cambie $_URL_BASE por la ruta raiz de su web, ya que al simular la url amigable.
//directorios, hará que no muestre adecuadamente los orígenes de los recursos que llama su página web.

$_URL_BASE="http://”.$Server.”/pruebas/url_amigable/index.php";
?>
<html>
<head>
<title >URL Amigables</title>
<base href = "<? echo $_URL_BASE; ?>" target="_top" />
</head>
<body>
<!– Aquí el contenido de su página web –>
</body>
</html>
<?php
//Limpia el posible bucle, es decir, se puede volver a hacer el envío.
$_SESSION[’Listo’]=0;
?>

Recomendaciones finales:

Como habrán podido ver el script no es complicado, y la adaptación a una web ya constituida tampoco lo será. Ya he probado la técnica en uno de mis proyectos (de manera local) y me ha funcionado bastante bien.

Lo que sí quiero aclarar es que al momento de testear esta técnica en una url de 5 variables a más me generó errores (básicamente no encuentra la url amigable generada); una url de 4 variables redirecciona correctamente, pero si luego de ello refresco el navegador genera el mismo error, es decir, no (re)carga la url amigable.

Mi consejo es que usen esta técnica en una url de 3 a menos de 3 variables pasadas por GET y personalicen este script a sus necesidades. Y como es lógico, les aconsejo bastante informarse más sobre el uso del mod_rewrite en Apache, creanme que les aliviará más de un dolor de cabeza.

Finalmente les diré que pueden descargarse el script desde aquí: url_amigable.zip.

Este artículo fue publicado originalmente en willy.tiperu.com.

Introducción

El presente manual permite explicar de manera sencilla y concisa cómo crearlos en nuestro servidor local y configurar nuestro sistema operativo para que acepte dichos nombres de host. Muchos de nosotros estamos acostumbrados a trabajar en nuestro servidor web local para nuestros proyectos en modo de prueba o testeo, y por lo generalmente tenemos más de un proyecto en camino, sea laboral (p.e. el web site de un cliente) o personal (p.e. nuestro blog o comunidad virtual). Solemos guardar estos proyectos en carpetas separadas dentro un directorio tal como C:/www/ que sería nuestro directorio raíz web (desde el cual llamamos a nuestro clásico http://localhost ), y llamar a nuestros proyectos de la siguiente manera en nuestro navegador preferido:

http://localhost/tiperu ,

http://localhost/willyblog ,

http://localhost/bazar , entro otros por citar un ejemplo.

En cierto modo podemos trabajar de manera regularmente cómoda, pero quizá desearíamos usar el nombre del dominio real con el que trabajos estos proyectos en la Internet. Así podríamos hacer usar lo siguiente:

http://www.tiperu.com en lugar de http://localhost/tiperu ,

http://willy.tiperu.com en lugar de http://localhost/willyblog , o

http://www.bazarperu.com en lugar de http://localhost/bazar

Y cómo hacemos esto?, pues la respuesta es sencilla, configurando la directiva VirtualHost de nuestro servidor Apache y el archivo host de nuestro Sistema Operativo (Windows o Linux).

Configurando el archivo host

Lo primero que configuraremos será el archivo host de nuestro SO, para Linux lo podemos encontrar en el directorio /etc/ mientras que para Windows XP lo encontramos en C:/Windows/System32/Drivers/etc/. Este archivo lo que hace es asignar direcciones IP a los nombres de host, para que al colocar por ejemplo 127.0.0.1 o localhost en nuestro navegador nos redireccione al mismo contenido. No se sorprenda si encuentra el siguiente par en el archivo host: 127.0.0.1 localhost, dónde el primer valor es nuestra dirección IP local y el segundo el nombre del host.

Lo que haremos ahora es colocar tantas entradas cono deseemos para nuestros proyectos, relacionando la IP local con nuestros nombres de dominio. Para el ejemplo tomaremos las rutas que di anteriormente, las cuales se colocarán debajo del par 127.0.0.1 localhost:

#localhost
127.0.0.1 localhost
#TIPeru COM SAC (Mi empresa de hosting)
127.0.0.1 www.tiperu.com
#Mi blog
127.0.01 willy.tiperu.com
#BazarPeru (Tienda Virtual)
127.0.0.1 www.bazarperu.com 

Nótese que he colocado el caracter “#” . Este carácter nos permite ingresar un texto a manera de comentario. Bueno, una vez hechos estos cambios procedemos a guardar el archivo.

Para confirmar su funcionamiento abra su navegador y digite cualquiera de los nombres de host que ha agregado, recuerde de respetar el nombre completo, ya que una entrada del tipo tiperu.com no tendría efecto por carecer del www. que lo antecede.

Si al ingresar el nombre del host le muestra el contenido de su http://localhost significa que la asignación de IP para el nombre de host a tenido efecto. Nótese que aún su nombre de host no apunta a la carpeta en la que se guarda su proyecto. Este punto lo veremos a continuación.

Configurando el archivo httpd.conf del Apache

Ahora configuraremos nuestro servidor Apache para que acepte los nombres de dominio agregados al archivo host y los relacione con las carpetas que albergan los archivos de nuestros proyectos. Para ello abriremos el archivo conf/httpd.conf y nos dirigiremos a la siguiente sección:

#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#

Notas:

•  Haga una copia de respaldo de sus archivos de configuración antes de realizar cualquier cambio en ellos.

•  Si no encuentra la sección Virtual Hosts en el archivo httpd.conf quizá lo pueda ubicar en la siguiente ruta conf/extra/httpd-vhosts.conf

Luego procederemos a quitar el comentario de ##NameVirtualHost *:80 dejándolo de la siguiente manera:

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80
#

Esta acción nos permisita trabajar con host virtuales basados en nombres. El * representa un número IP y puede ser reemplazado por uno de ellos si desee. Para el ejemplo déjelo tal y como esta.

Enseguida procederemos a configurar los host virtuales, agregándolos de la siguiente manera:

#localhost
<VirtualHost *:80>
DocumentRoot "C:/www"
ServerName localhost:80
</VirtualHost> 

#TIPeru COM SAC
<VirtualHost *:80>
DocumentRoot "C:/wwww/tiperu"
ServerName www.tiperu.com
</VirtualHost> 

#Mi Blog
<VirtualHost *:80>
ServerAdmin willy@tiperu.com
DocumentRoot "C:/wwww/willy"
ServerName willy.tiperu.com
</VirtualHost>
#BazarPeru
<VirtualHost *:80>
ServerAdmin webmaster@bazarperu.com
DocumentRoot "C:/wwww/bazar"
ServerName www.bazarperu.com
</VirtualHost>

Como se puede aprecia cada Virtual Host esta encerrado entre las etiquetas <VirtualHost> y </VirtualHost> que contiene el parámetro *:80 que es NameHostVirtual al cual se refiere. Dentro de estas etiquetas, 2 valores son esenciales para que funcionen correctamente nuestros host virtuales:

•  DocumentRoot. Que es la ruta en la cual se guarda nuestra página web; y

•  ServerName . Que es el nombre del host que previamente agregamos al archivo host de nuestro S.O.

Adicionalmente podemos agregar otros valores, tal como si cada host virtual fuera un host independiente (p.e. ServerAdmin).

Nótese algo muy importante. Si bien localhost es nuestro servidor local por defecto, debemos también agregarlo con un virtual host para que todo trabaje en orden, y debemos agregarle los mismos valores del DocumentRoot y ServerName que posee en su configuración global, de lo contrario no cargará el host.

Finalmente lo que haremos es para el servicio de nuestro servidor Apache y volverlo a inciar. Si tod o esta correctamente configurado podemos cargar en nuestro navegador uno de los nombres de host y ver los resultados (p.e. www.tiperu.com ). Si carga el contenido de la carpeta que le hemos asignado en el <VirtualHost> y no el directorio raiz del localhost quiere decir que todo esta correcto. Felicidades Ud. Ya tiene configurado su host virtual !!!

Agradecimientos

Al equipo de TIPeru COM por su contante apoyo. Y a la Asociación Nacional de Webmaster del Perú ( ANWMP ) por resolver mis dudas e interrogantes mediante sus foros y Chat en línea.

Bibliografía básica en línea

Soporte Apache de hosts virtuales basados en nombre

http://quark.fe.up.pt/ApachES/manual-es/vhosts/name-based.html

Configuración de Apache | Cibernetia

http://www.cibernetia.com/manuales/instalacion_servidor_web/2_3_configuracion_apache.php

Virtual Host examples for common setups

http://quark.fe.up.pt/ApachES/manual-es/vhosts/examples.html