<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>emenia.es &#187; Apache</title>
	<atom:link href="http://www.emenia.es/category/apache/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.emenia.es</link>
	<description>Creación y diseño web</description>
	<lastBuildDate>Mon, 31 May 2010 14:34:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Cómo crear URLS amigables con .htaccess</title>
		<link>http://www.emenia.es/como-crear-urls-amigables-con-htaccess/</link>
		<comments>http://www.emenia.es/como-crear-urls-amigables-con-htaccess/#comments</comments>
		<pubDate>Fri, 11 Dec 2009 19:52:11 +0000</pubDate>
		<dc:creator>Juan Diaz-Bustamante</dc:creator>
				<category><![CDATA[Apache]]></category>

		<guid isPermaLink="false">http://www.emenia.es/?p=506</guid>
		<description><![CDATA[Las URL amigables están de moda por su mayor usabilidad y sus posibles efectos positivos en buscadores. Vamos a ver cómo conseguirlas con un archivo .htaccess]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.emenia.es%2Fcomo-crear-urls-amigables-con-htaccess%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.emenia.es%2Fcomo-crear-urls-amigables-con-htaccess%2F&amp;source=JuanDBB_Emenia&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><strong>¿Qué es una URL amigable?</strong> Lo mejor es un ejemplo. Esto NO es una URL amigable:</p>
<p><img src="http://www.emenia.es/wp-content/uploads/2009/12/htaccess11.png" alt="htaccess1" title="htaccess1" width="400" height="25" class="aligncenter size-full wp-image-515" /><br />
En cambio esta SI es una URL amigable:<br />
<img src="http://www.emenia.es/wp-content/uploads/2009/12/htaccess2.png" alt="htaccess2" title="htaccess2" width="353" height="45" class="aligncenter size-full wp-image-509" /></p>
<p>Su propio nombre lo indica: las URL amigables son más fáciles de usar y de recordar por los usuarios y también se dice (y hay quien dice que no) que son mejores para el posicionamiento en buscadores. Además describen mucho mejor los enlaces dentro de una página web y añade un mayor nivel de profesionalidad a nuestras webs.</p>
<p>De todas formas, cuando hemos creado una página dinámica en PHP lo normal es que tengamos URL no amigables. ¿Cómo las convertimos en amigables de manera automática? Una manera de hacerlo es con un archivo <strong>.htaccess</strong> y gracias a Apache y su <strong>mod_rewrite</strong>.</p>
<p>Veamos la teoría: <strong>mod_rewrite es un módulo de Apache</strong> que permite manipular en el servidor las URLs solicitadas. Es decir, cuando llega al servidor la solicitud de una URL, esta se comprueba con respecto a una serie de reglas creadas con Expresiones Regulares creadas para detectar un patrón determinado. Si se encuentra ese patrón en el URL y se cumple la condición impuesta por la Expresión Regular se sustituye el patrón por una cadena de texto o por una acción determinada. </p>
<p><img src="http://www.emenia.es/wp-content/uploads/2009/12/htaccess32.png" alt="htaccess3" title="htaccess3" width="350" height="345" class="aligncenter size-full wp-image-518" /></p>
<p>IMPORTANTE: Para que todo esto funcione tiene que estar activado el módulo mod_rewrite en nuestro servidor Apache. Podemos saber si lo está simplemente con:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">phpinfo</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>Y de entre toda la información recibida si el módulo está activado tendremos:<br />
<img src="http://www.emenia.es/wp-content/uploads/2009/12/mod_rewrite2.jpg" alt="mod_rewrite" title="mod_rewrite" width="608" height="406" class="aligncenter size-full wp-image-525" /></p>
<p>Lo más normal es que esté activado. Sino fuera así quizás tendríamos que hablar con nuestro proveedor de hosting.</p>
<p>Una vez sabemos que mod_rewrite está activado lo que necesitamos es un archivo .htaccess <strong>¿Qué es un archivo .htaccess?</strong> Es un fichero de configuración utilizado por los servidores web Apache. Son archivos de texto.</p>
<p>¿Qué vamos a escribir en el archivo .htaccess? Como decíamos antes, una serie de <strong>Expresiones Regulares</strong> para interpretar el URL entrante y crear un URL saliente interpretable por nuestro código. Si no sabéis nada sobre Expresiones Regulares (o Regular Expressions en Inglés) es importante que leais algo sobre las mismas antes de seguir. Con una simple búsqueda en Google podréis encontrar gran cantidad de tutoriales. Si sabéis inglés, este <a href="http://blog.themeforest.net/screencasts/a-crash-course-in-regular-expressions/" title="Ir al tutorial">tutorial de themeforest</a> es muy bueno. También podéis bajaros esta <a href="http://www.addedbytes.com/download/regular-expressions-cheat-sheet-v2/png">hoja de referencia de Expresiones Regulares</a> (en inglés)</p>
<p>Bueno, vamos a pasar a la acción. Os aconsejo que lo hagáis también vosotros improvisando casos distintos para poderlo comprender mejor. Vamos a empezar por un ejemplo sencillo: Vamos a crear dos archivos, uno index.php y otro clientes.php</p>
<p>index.php tendrá únicamente un enlace a clientes.php, para simplificarlo todo un poco.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;!</span>DOCTYPE html <span style="color: #000000; font-weight: bold;">PUBLIC</span> <span style="color: #0000ff;">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span>
   <span style="color: #0000ff;">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>html xmlns<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;http://www.w3.org/1999/xhtml&quot;</span> lang<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;es&quot;</span> xml<span style="color: #339933;">:</span>lang<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;es&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>head<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>meta http<span style="color: #339933;">-</span>equiv<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;Content-Type&quot;</span> content<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/html; charset=iso-8859-1&quot;</span> <span style="color: #339933;">/&gt;</span>
	<span style="color: #339933;">&lt;</span>title<span style="color: #339933;">&gt;</span>Ejemplo de URL amigable<span style="color: #339933;">&lt;/</span>title<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>head<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>body<span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>h1<span style="color: #339933;">&gt;</span>Ahora estás en index<span style="color: #339933;">.</span>php<span style="color: #339933;">&lt;/</span>h1<span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;clientes/juan&quot;</span><span style="color: #339933;">&gt;</span>Juan<span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>body<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>html<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>Como podéis ver el enlace es ya una URL amigable. Sin embargo al hacer click sobre el enlace necesitamos interpretar esa URL que llega al servidor para que este sepa qué hacer. <strong>Creamos un archivo de texto, lo grabamos como .htaccess y escribimos en él:</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="html" style="font-family:monospace;"># Activar RewriteEngine
RewriteEngine on
&nbsp;
# Reescribir la URL solicitada por el usuario
#   Entrada:  clientes/NOMBRE/
#   Salida: clientes.php?id=NOMBRE
RewriteRule ^clientes/(\w+)/?$ clientes.php?id=$1</pre></td></tr></table></div>

<p>Vamos a ver línea a línea. En primer lugar tenemos que activar la re-escritura de la URL, para lo cual hay que activar <strong>RewriteEngine</strong>. A continuación establecemos una Regla de Re-escritura (RewriteRule) para gestionar la página clientes.php. Como véis, estamos re-escribiendo la URL amigable clientes/juan al formato normal clients.php?id=&#8217;juan&#8217;<br />
En esta regla de re-escritura <strong>hay dos partes</strong>. Por un lado <strong>^clientes/(\w+)/?$</strong> que es una expresión regular que indica:<br />
<img src="http://www.emenia.es/wp-content/uploads/2009/12/htaccess4.png" alt="htaccess4" title="htaccess4" width="350" height="273" class="aligncenter size-full wp-image-533" /><br />
Ahora vamos con <strong>la segunda parte</strong>. En la segunda parte tenemos la expresión que sustituirá a la primera parte:<br />
<img src="http://www.emenia.es/wp-content/uploads/2009/12/htaccess5.png" alt="htaccess5" title="htaccess5" width="350" height="112" class="aligncenter size-full wp-image-536" /></p>
<p>Ahora vamos a ver el archivo clientes.php:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #666666; font-style: italic;">// Obtenemos el nombre del usuario desde la URL</span>
<span style="color: #000088;">$id</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'id'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
   &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;es&quot; xml:lang=&quot;es&quot;&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /&gt;
	&lt;title&gt;Ejemplo de URL amigable&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Ahora estás en clientes.php&lt;/h1&gt;
  &lt;p&gt;Nombre del cliente: <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$id</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></td></tr></table></div>

<p>Haced la prueba y veréis cómo funciona perfectamente la URL amigable. Para complicar más las cosas se pueden incluir <em>banderas</em> al final que cada expresión. Imaginaros por ejemplo que hubiera posibles alternativas para reescribir una URL amigable, pero queremos que una vez encuentre la primera se detenga ahí y no siga contrastándose con el resto de Expresiones Regulares. Entonces la bandera a añadir sería <strong><em>[L]</em></strong>:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="php" style="font-family:monospace;">RewriteRule ^<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span>a<span style="color: #339933;">-</span>zA<span style="color: #339933;">-</span>Z0<span style="color: #339933;">-</span><span style="color: #cc66cc;">9</span><span style="color: #339933;">-</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">*</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">/</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">9</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#41;</span>\<span style="color: #339933;">-</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span>a<span style="color: #339933;">-</span>zA<span style="color: #339933;">-</span>Z0<span style="color: #339933;">-</span><span style="color: #cc66cc;">9</span><span style="color: #339933;">-</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">*</span><span style="color: #009900;">&#41;</span>\<span style="color: #339933;">.</span>html<span style="color: #009900;">&#40;</span><span style="color: #339933;">.*</span><span style="color: #009900;">&#41;</span>$ product<span style="color: #339933;">.</span>php?id_product<span style="color: #339933;">=</span>$<span style="color: #cc66cc;">2</span>$<span style="color: #cc66cc;">4</span> <span style="color: #009900;">&#91;</span>L<span style="color: #009900;">&#93;</span>
RewriteRule ^<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">9</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#41;</span>\<span style="color: #339933;">-</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span>a<span style="color: #339933;">-</span>zA<span style="color: #339933;">-</span>Z0<span style="color: #339933;">-</span><span style="color: #cc66cc;">9</span><span style="color: #339933;">-</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">*</span><span style="color: #009900;">&#41;</span>\<span style="color: #339933;">.</span>html<span style="color: #009900;">&#40;</span><span style="color: #339933;">.*</span><span style="color: #009900;">&#41;</span>$ product<span style="color: #339933;">.</span>php?id_product<span style="color: #339933;">=</span>$<span style="color: #cc66cc;">1</span>$<span style="color: #cc66cc;">3</span> <span style="color: #009900;">&#91;</span>L<span style="color: #009900;">&#93;</span></pre></td></tr></table></div>

<p>Tenéis todas las banderas en esta <a href="http://www.addedbytes.com/cheat-sheets/mod_rewrite-cheat-sheet/" title="Ir a la Hoja de Ayuda Rápida de mod_rewrite">hoja de ayuda rápida de mod_rewrite</a>.</p>
<p><strong>Por último, decir que es aconsejable añadir unas pocas líneas más a nuestro código. Lo voy a hacer aprovechando para crear un nuevo ejemplo</strong>. Supongamos un caso como este:<br />
<img src="http://www.emenia.es/wp-content/uploads/2009/12/htaccess6.png" alt="htaccess6" title="htaccess6" width="458" height="282" class="aligncenter size-full wp-image-564" /><br />
El archivo .htaccess que crearíamos sería:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;IfModule mod_rewrite.c&gt;
# Activar RewriteEngine
RewriteEngine on
RewriteBase / 
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
&nbsp;
# Reescribir la URL solicitada por el usuario
#   Entrada:  ID-NOMBRE
#   Salida: pruducto.php?id=ID
RewriteRule ^([0-9]+)\-([a-zA-Z0-9-]*)$ producto.php?id=$1
&lt;/IfModule&gt;</pre></td></tr></table></div>

<p>Hemos añadido un condicional <strong><IfModule mod_rewrite.c> </IfModule></strong> para comprobar que está activado el módulo antes de hacer nada. Luego hemos añadido &#8220;RewriteBase /&#8221; que indica que el directorio base es el raíz. Si fuera por ejemplo una carpeta llamada &#8220;base&#8221; haríamos &#8220;RewriteBase /base&#8221;.<br />
Además hemos añadido dos líneas que lo que hacen es restringir la re-escritura sólo a rutas que no existan previamente. Es decir, que no valdría por ejemplo para ejemplo.com/imagenes/logo.png. La primera línea previene los directorios que ya existan con la bandera <strong>!-d</strong> y la segunda hace que se ignoren ficheros que ya existan con la bandera <strong>!-f</strong>. </p>
<p>Luego, en la regla de reescritura, tenemos una entrada compuesta por números, luego va un guión (/-) y luego una cadena que puede incluir letras en mayúsculas, en minúsculas, números y guiones (por lo que 34-lampara-verde cumpliría). La salida que ya conoce nuestro código PHP (aunque esto está oculto al usuario) es producto.php?id=$1, siendo $1 el valor que hemos atrapado entre los dos primeros paréntesis (en este caso, 34). Si observáis tenemos también atrapado un segundo grupo que es ([a-zA-Z0-9-]*) y que lo podríamos recuperar con $2, pero en este caso no nos sirve. </p>
<p>Esto es sólo el comienzo, pero toda la base está ahí. Otra manera alternativa de conseguir URL amigables es combinar un archivo .htaccess con PHP, pero eso sería materia de otro artículo. Algunas de las lecturas recomendadas a continuación sí indican cómo hacerlo.</p>
<h3>Lecturas Recomendadas</h3>
<p>baluart.net: Ofrece una función muy interesante para transformar el título de una noticia (por ejemplo) y transformarlo (cambiando las letras con tildes, eñes, etc) para conseguir una frase asequible a los buscadores y navegadores &#8211;  <a href="http://www.baluart.net/articulo/urls-amigables-con-php">Urls Amigables con PHP</a><br />
corz.org: <a href="http://corz.org/serv/tricks/htaccess2.php" title="Ir al artículo">more .htaccess tips and tricks.</a>.<br />
nettutplus.com: <a href="http://net.tutsplus.com/tutorials/other/using-htaccess-files-for-pretty-urls/" title="Ir al artículo">Using htaccess Files for Pretty URLS</a><br />
nettutplus.com: <a href="http://net.tutsplus.com/tutorials/other/a-deeper-look-at-mod_rewrite-for-apache/" title="Ir al artículo">A Deeper Look at mod_rewrite for Apache</a><br />
stewparkin.com: <a href="http://www.stewparkin.com/2009/03/apache-re-writes-in-htaccess/" title="Ir al artículo">Apache Re-Writes in .htaccess</a><br />
Source Rally: <a href="http://www.sourcerally.net/regin/12-Make-pretty-URLs-with-PHP-and-mod_rewrite" title="Ir al artículo">Make pretty URLs with PHP and mod_rewrite</a><br />
AddedBytes: <a href="http://www.addedbytes.com/for-beginners/url-rewriting-for-beginners/" title="Ir al artículo">URL Rewriting for Beginners</a><br />
webm.ag: <a href="http://www.webm.ag/2009/11/27/how-to-make-dynamically-generated-seo-friendly-urls-using-php-and-htaccess/" title="Ir al artículo">How To Make Dynamically Generated SEO-Friendly URLs Using PHP And .htaccess</a><br />
noupe: <a href="http://www.noupe.com/php/10-mod_rewrite-rules-you-should-know.html" title="Ir al artículo">10+ Mod_Rewrite Rules You Should Know</a></p>
<div id="crp_related"><h3>Artículos relacionados:</h3><ul><li><a href="http://www.emenia.es/taxonomias-en-wordpress/" rel="bookmark" class="crp_title">Taxonomías en Wordpress</a></li><li><a href="http://www.emenia.es/como-incrementar-la-seguridad-de-una-web-creada-con-wordpress/" rel="bookmark" class="crp_title">Cómo incrementar la seguridad de una web creada con Wordpress</a></li><li><a href="http://www.emenia.es/lista-productos-wordpress-3/" rel="bookmark" class="crp_title">Crear una lista de productos con Wordpress 3.0 usando Entradas personalizadas, campos personalizados y taxonomías</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.emenia.es/como-crear-urls-amigables-con-htaccess/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>
