Fuente: http://perlenespanol.com/articulos/archivo/000180.html

mod_rewrite: Guía Básica para reescribir URLs

por Uriel Lizama

Hoy en día la posición en los buscadores es un factor importante en el éxito de un sitio web. También se sabe que a los buscadores no le atraen mucho los sitios dinámicos, es decir, aquellos que cambian su contenido dependiendo de diversos factores.
Por ejemplo, mi foro de Perl en Español está en PHP por lo que los urls para navegar el foro son parecidos a esto:

http://perlenespanol.com/foro/viewforum.php?f=3

Y aunque los bots de los buscadores lo pueden leer e indexar en su base de datos, si ponen un penalti por ser un url dinámico. Para solucionar esto, si eres un visitante o un robot, el url que verás será:

http://perlenespanol.com/foro/forum-3.html

Si pruebas ambos urls verás que muestra el mismo contenido. Podrás pensar que son dos páginas distintas, pero no es así, el segundo url, el que simula una página estática, es convertido detrás de las cortinas para llamar a la página real. Así es, en mi servidor no existe un archivo forum-3.html.
En este artículo les voy a mostrar como lograr esto.

Una solución elegante
Quizá estarán pensando que todo esto es un producto de magia, pero realmente es bastante sencillo lograrlo y los resultados serán muy buenos, pues no solamente podrán dar urls estáticos a los buscadores mejorando su posición, sino que también podrán dar urls amigables a sus usuarios.
Para poder lograr esto es necesario tener lo siguiente:

• Un servidor Apache versión 1.2 o mejor.
• Acceso para editar los archivos de configuración .htaccess, y quizá de ser necesario el http.conf.

Si están acostumbrados a usar servidores Apache, lo más seguro es que en algún momento hayan escuchado acerca del módulo mod_rewrite de Apache. Normalmente este módulo viene por default en las distribuciones de Apache pero en sistemas *nix puede que haya sido compilado sin este módulo.
Para poder usar este módulo primero lo tenemos que activar. En caso de que no tengas el módulo activado tendrás que editar tu archivo http.conf y quitar el comentario de la línea que carga el módulo para que quede de la siguiente manera:

#LoadModule rewrite_module
modules/mod_rewrite.so 
#AddModule mod_rewrite.c

Comprendiendo mod_rewrite
Es importante comprender lo que hace exactamente este módulo.
El mod_rewrite se ejecuta después de hacer un request en tu servidor y antes de ejecutar cualquier script. Lo que hace es que aplica un "filtro" configurado por uno sobres los urls y los rescribe detrás de las cortinas.
Por ejemplo, podrías tener un url inexistente como el siguiente:

http://www.tusitio.com/algo

Y entonces el mod_rewrite lo podría convertir a:

http://www.tusitio.com/cgi-bin/dir/aplicacion.cgi?categoria=algo

La conversión del url se hace por detrás por lo que el usuario no podrá ver nada de esto, sin embargo si verá el resultado que viene de la ejecución del url "real".
Es importante comprender que mod_rewrite NO puede ser usado para cambiar el URL que el usuario ve es la barra de Dirección de su navegador a menos que una redirección externa es invocada. Sin embargo una dirección externa expone finalmente el url dinámico, así que mod_rewrite hace una redirección interna.
También es importante comprender que mod_rewrite cambia la dirección del archivo y las variables del url pedido pero NO cambia en ningún momento el despliegue de las mismas.

Poniendo mod_rewrite en práctica
Muy bien, empecemos con lo bueno, para esto vamos a hacer un ejemplo práctico.
Digamos que tienes una tienda de ropa y que tus clientes pueden ver la ropa que tienes navegando por categoría y talla de la misma. Para esto tienes una aplicación que se llama de la siguiente manera:

http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica

No es para nada bonito el url, por lo que queremos que nuestros clientes puedan acceder de la siguiente manera:

http://tusitio.com/playeras/femenino/chica.htm

Como ves es más intuitivo y amigable.
Usando mod_rewrite no es necesario hacer ningún cambio en tu aplicación, ni siquiera es necesario que crees los directorios 'playeras/' ni 'playeras/femenino', tampoco es necesario que hagas un archivo que se llame chica.htm.
Lo que vamos a hacer es que cuando algún usuario haga un request de 'http://tusitio.com/playeras/femenino/chica.htm' usaremos el mod_rewrite para filtrar y convertir el url a 'http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica', pero todo esto detrás de las cortinas, usando la redirección interna como habíamos dicho.
Ya que estemos seguros que tenemos el mod_rewrite instalado y activo, vamos a crear un nuevo archivo de configuración .htaccess.
Dentro de nuestro .htaccess vamos a inicializar el módulo mod_rewrite:

    RewriteEngine On

Ya que tenemos esto, tenemos que configurar las reglas o filtros que vamos a usar. Cada uno deberá de ir en una nueva línea y podemos tener tantos como nosotros queramos y necesitemos.
Entonces vamos a crear nuestro filtro que ser verá así:

    RewriteRule ^playeras/femenino/chica.htm cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica [L,NC]

Comprendamos nuestra línea del filtro. El filtro está conformado por 4 elementos, cada uno separado por un espacio en blanco.
El primer elemento es:

    RewriteRule

Aquí indicamos que estamos creando una nueva regla o filtro para la máquina de mod_rewrite. El segundo elemento es:

    ^playeras/femenino/chica.htm

En este caso es el url que estamos buscando. Es importante que tengamos en cuenta que siempre debemos de usar los directorio relativos, es decir, no debemos de poner el dominio de nuestro sitio, el mod_rewrite lo pondrá por nosotros.
La tercera parte es el nuevo url al cual queremos redirigir, también la dirección debe de estar relativa, mod_rewrite pondrá por nosotros el dominio de nuestro sitio.

    cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica

NOTA: No podemos usar el mod_rewrite para hacer una redirección interna a un url que no se encuentre dentro de nuestro dominio.

La última parte es opcional y son flags que regulan el comportamiento del mod_rewrite.

    [L,NC]

En las siguientes secciones veremos más detalles acerca de los flags, pero podemos decir que con los flags L y NC le decimos al mod_rewrite que sea la última regla que cheque si coincide y que no haga caso a las minúsculas y mayúsculas.

Más poder a nuestro mod_rewrite
El ejemplo anterior es de gran ayuda, vimos como podemos convertir un url dinámico en estático en cuestión de minutos, pero hay un pequeño problema.
Lo más seguro es que nuestra tienda de ropa no venda puras playeras chicas, ni tampoco puras de mujer, y lo más seguro es que venda más productos que puras playeras, debe de haber pantalones, chamarras, shorts, camisas, vestidos, etc, etc.
Hacer una nueva regla por cada producto y por cada tamaño será un verdadero dolor de cabeza, y aparte cada ves que queramos poner una nueva línea de productos en la tienda tendremos que modificar nuestro .htaccess.
Pues bueno, con mod_rewrite podemos evitar eso, pues aún no hemos visto la parte más poderosa.
En el último ejemplo hicimos un filtro bastante sencillo:

    RewriteEngine On
    RewriteRule ^playeras/femenino/chica.htm cgi-bin/aplicacion_ropa.cgi?tipo=playeras&sexo=femenino&talla=chica [L,NC]

Pero también quisiéramos que los siguientes urls lo redirija al lugar correcto:

http://tusitio.com/pantalones/masculino/32.htm
http://tusitio.com/vestidos/femenino/mediano.htm
http://tusitio.com/shorts/infantil/12.htm
...

Si vemos, todos los urls tiene una misma sintaxis, el primer directorio sería la línea de ropa (pantalones,vestidos,shorts,etc), el subdirectorio sería el departamento (masculino,femenino,infantil,etc) y el archivo html sería la talla (32.htm,mediano.html,12.htm).
mod_rewrite nos permite usar expresiones regulares dentro de nuestros filtros, de esta manera podemos realizar filtros más poderosos.
Las expresiones regulares nos brindan un set de reglas que podemos usar para comprobar valores arbitrarios como en este caso. Sabemos que el url vendrá en una misma sintaxis pero tendrá diferentes valores, usando las expresiones regulares podemos capturar y comprobar esos valores.
Veamos la expresión regular que usaríamos en este caso para hacer lo que queremos:

    ^([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z0-9]+).htm$

Expliquemos un poco nuestra expresión.
El ^ incial denota inicio de línea, significa que solamente será válida la regla si se cumple iniciando la línea.
Los paréntesis ( ) los usamos para capturar el valor, en este caso así lo queremos pues después tendremos que usarlos para enviárselos a nuestro CGI de la aplicación.
Los [ ] los usamos para asignar un campo de caracteres. Los campos de caracteres los podemos usar cuando queremos checar que ciertos caracteres estén o no estén. En la primera parte que será de la línea de ropa, sabemos que solamente vendrán letras del alfabeto, por lo que solamente queremos de la a-z y de la A-Z, en minúsculas y mayúsculas. Lo mismo en la segunda parte, pero ya en la tercera parte si puede haber números por ejemplo en 32.htm, por lo que tenemos que poner también el 0-9.
El signo de + después del cierre del campo de carácter, significa que debe de haber por lo menos uno o más de los caracteres que queremos.
Luego tenemos la separación con las diagonales '/' que están fuera de los paréntesis pues queremos capturar solamente 'pantalones' y no 'pantalones/'.
Al final también dejamos el .htm fuera de los paréntesis pues no lo queremos usar, y terminamos con $ que simboliza final de línea.
Así ya tenemos nuestros valores capturados que ahora podremos usar en el url para llamar al CGI de nuestra aplicación:

    cgi-bin/aplicacion_ropa.cgi?tipo=$1&sexo=$2&talla=$3

Vemos como los valores los sustituimos por $1, $2, $3 que a su vez serán sustituidos por mod_rewrite con los valores que capturamos en nuestros paréntesis.
Cada paréntesis captura en una nueva variable y lo hacen en orden, así que van tomando $1, $2, $3, $4.. así hasta lo que se necesite.
Así que finalmente nuestra regla se verá de la siguiente manera:

    RewriteEngine On
    RewriteRule ^([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z0-9]+).htm$ cgi-bin/aplicacion_ropa.cgi?tipo=$1&sexo=$2&talla=$3 [L,NC]

Así si llamamos a los siguientes urls:

http://tusitio.com/pantalones/masculino/32.htm
http://tusitio.com/vestidos/femenino/mediano.htm
http://tusitio.com/shorts/infantil/12.htm

Serán redireccionados internamente a:

http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=pantalones&sexo=masculino&talla=32
http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=vestidos&sexo=femenino&talla=mediano
http://tusitio.com/cgi-bin/aplicacion_ropa.cgi?tipo=shorts&sexo=infantil&talla=12

Así de la nada, tenemos una lista infinita de páginas estáticas fáciles de navegar por nuestros usuarios.

Tomándole la medida a mod_rewrite
Usar mod_rewrite es sumamente sencillo, quizá lo más difícil podría ser aprender a usar las expresiones regulares y los flags que podemos usar para controlar el comportamiento del módulo.
Sin embargo ambas son muy intuitivas y con un poco de uso y de estar jugando y probando con ellas, les tomarás la práctica inmediatamente.
Dave Child hizo un PDF con un "acordeón" que enlista las expresiones regulares y flags que podemos usar en el mod_rewrite. Les recomiendo que descarguen el PDF con la lista y lo tengan a la mano en el momento de crear sus filtros:
https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGdoYXJ0dW5nLmNvbXx3d3d8Z3g6NGVhZjc0NGViYzhiYWM3Mg


Últimas Palabras
Cuando hagas tus primeras pruebas con el mod_rewrite, ten cuidado y si puedes has las pruebas con un servidor Apache que no esté en vivo, pues si tienes algún error de sintaxis al momento de crear tus filtros, verás un error 500 en todo tu sitio, evitando que tus usuarios puedan acceder a él.

En caso de que quieras convertir tu sitio de estático a dinámico pero no te atreves a hacerlo tu sólo, puedes usar nuestros Servicios de Perl en Español y nosotros lo haremos por ti:
http://perlenespanol.com/servicios/

Reconocimiento de Voz con HTML5, Javascript - Jquery

 https://www.youtube.com/watch?v=Qb0OQts4piE

https://www.youtube.com/watch?v=Qb0OQts4piE

Programacion en Moviles - Tutoriales y descargas

Windows Phone SDK 8.0

The Windows Phone Software Development Kit (SDK) 8.0 provides you with the tools that you need to develop apps and games for Windows Phone 8 and Windows Phone 7.5. 
http://www.microsoft.com/en-us/download/details.aspx?id=35471

Visual Studio

Herramientas gratuitas para desarrolladores / Repositorios privados ilimitados gratuitos

https://www.visualstudio.com/es-es

Guia y paso a paso

https://www.visualstudio.com/get-started/overview-of-get-started-tasks-vs

Juegos con Unity

http://unity3d.com/es

Ux2012 - Patrones de Interfaz

Ux2012 - Patrones de Interfaz

Fuente: http://es.slideshare.net/victorfp/ux2012-patrones-de-interfaz-tidwell

Fuente 2 :


http://ui-patterns.com/

Load Data while Scrolling Page Down with jQuery and PHP

Fuente:  http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html




This tutorial about my favorite place Dzone like data loading while page scrolling down with jQuery and PHP. We have lots of data but can not display all. This script helps you to display little data and make faster your website. Take a look at live demo and scroll down.

Download Script     Live Demo

Database Table

CREATE TABLE messages(
mes_id INT PRIMARY KEY AUTO_INCREMENT,
msg TEXT);

Browser Capability : Safari, Firefox, IE, Chrome

load_data.php
When we are scrolling down a webpage, the script($(window).scroll) finds that you are at the bottom and calls the last_msg_funtion(). Take a look at $.post("") eg: $.post("load_data.php?action=get&last_msg_id=35")

<?php
include('config.php');
$last_msg_id=$_GET['last_msg_id'];
$action=$_GET['action'];

if($action <> "get")
{
?>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function last_msg_funtion()
{
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('<img src="bigLoader.gif">');
$.post("load_data.php?action=get&last_msg_id="+ID,

function(data){
if (data != "") {
$(".message_box:last").after(data);
}
$('div#last_msg_loader').empty();
});
};

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
});
});
</script>

</head>

<body>

<?php
include('load_first.php'); //Include load_first.php
?>

<div id="last_msg_loader"></div>

</body>

</html>

<?php
}

else
{
include('load_second.php'); //include load_second.php
}
?>

load_first.php
Contains PHP code to load 20 rows form the message table.

<?php
$sql=mysql_query("SELECT * FROM messages ORDER BY mes_id DESC LIMIT 20");
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg'];
?>
<div id="<?php echo $msgID; ?>" class="message_box" > 
<?php echo $msg; ?>

</div> 

<?php
} 
?>

load_second.php
Contains PHP code to load 5 rows less than last_msg_id form the message table.

<?php
$last_msg_id=$_GET['last_msg_id'];
$sql=mysql_query("SELECT * FROM messages WHERE mes_id < '$last_msg_id' ORDER BY mes_id DESC LIMIT 5");
$last_msg_id="";
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg']; 
?>
<div id="<?php echo $msgID; ?>" class="message_box" > 
<?php echo $msg;
?>

</div>

<?php
} 
?>

CSS

body

{
font-family:'Georgia',Times New Roman, Times, serif;
font-size:18px;
}

.message_box

{
height:60px;
width:600px;
border:dashed 1px #48B1D9;
padding:5px ;
}

#last_msg_loader

{
text-align: right;
width: 920px;
margin: -125px auto 0 auto;
}

.number

{
float:right;
background-color:#48B1D9;
color:#000;
font-weight:bold;
}

Botón de compartir en Facebook

Fuente: http://www.desarrolloweb.com/articulos/boton-compartir-facebook.html


Veremos varias maneras de crear un botón de compartir un enlace en Facebook o enviar un artículo a Facebook.


En este artículo vamos a mostrar varias maneras de crear el típico botón de compartir un enlace en tu cuenta Facebook, con el que los visitantes de tu página web pueden enviar tus contenidos a sus perfiles dentro de esta red social y así promocionar tus contenidos.
Existen varias maneras de conseguir esto y la más sencilla sería utilizar los scripts que Facebook ofrece para crear estos botones casi de manera instantánea. Sin embargo, algunos desarrolladores preferirán personalizar estos botones, por medio de imágenes o iconos propios y provocar comportamientos distintos al habitual al pulsar el botón para enviar a Facebook.
Básicamente, para enviar un contenido a Facebook tenemos que generar un enlace a una dirección del sitio de Facebook, enviando la URL que queremos compartir. Esa URL tendrá esta forma simplificada:
http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/manuales
Si accedemos a esa URL con nuestro navegador veremos la página de Facebook para compartir ese enlace y publicarlo en el muro de nuestro usuario. Si tu navegador guarda la sesión de Facebook (es decir, si solicitaste a Facebook que recordase tu usuario cuando accedes a la red social) aparecerá directamente la página para compartir. En caso contrario verás una página para introducir tus datos de acceso (login) de tu usuario.
Facebook se encarga solito de recuperar el título del artículo o página a compartir, así como las imágenes asociadas, etc. Por lo que, en principio no hace falta indicar nada más para que esto funcione.
Una vez ya conocemos este comportamiento básico, veamos algunas maneras sencillas que podemos implementar en nuestro sitio web.

1.- Utilizar un botón/script de Facebook

Facebook tiene una cosa que le llaman el "Share Button", que crea este botón por su propia cuenta al insertar un enlace y un script en tu página web. Esta manera de actuar es interesante, pues estos botones son bastante "inteligentes" y proveen de un contador de personas que enviaron tu enlace a la red social, aparte de la propia funcionalidad de compartir. Además, el servicio se puede configurar para que muestre distintos tipos de botones, que podemos elegir en función del aspecto que tenga nuestra página. Es quizás la manera más adecuada de colocar el botón, pero tiene el inconveniente de no permitir personalizar la imagen o botón que se va a utilizar (o por lo menos en el momento de escribir este artículo no existe esta opción). Por ello, si queremos utilizar un botón con aspecto personalizado, tendremos que buscar otra solución.
Todas las instrucciones para conseguir implementar este botón en tu web están en la Wiki de desarrolladores de Facebook, en la página que trata sobre Facebook Share.
El código HTML para insertar un botón de los que provee Facebook tendrá esta forma:
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Además, podemos seleccionar el tipo de botón a utilizar entre varias posibilidades, con el atributo "type" en el enlace.
<a name="fb_share" type="box_count" share_url="YOUR_URL"></a>
<a name="fb_share" type="button_count" share_url="YOUR_URL"></a>
<a name="fb_share" type="button" share_url="YOUR_URL"></a>
<a name="fb_share" type="icon_link" share_url="YOUR_URL">Share</a>
<a name="fb_share" type="icon" share_url="YOUR_URL"></a>
El atributo del enlace "share_url" es opcional y sirve para indicar la URL que queremos que se comparta. Pero si no indicamos nada en ese atributo se enviará a Facebook la URL de la página donde se ha colocado el botón.
Además, si queremos que dentro del botón esté escrito un mensaje personalizado, podemos poner texto en el enlace, algo así como:
<a name="fb_share" type="button_count">Compartir en FB</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

2.- Enlace simple de enviar a Facebook

Otra variante que podemos implementar, si es que deseamos personalizar el botón de enviar a Facebook es crear un enlace normal, dirigido a la URL para compartir en Facebook. <a target="_blank" href="http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/">Compartir FB</a>
En este caso se crearía un enlace y en el texto aparecería "Compartir FB", y claro, si queremos utilizar nuestro propio icono en vez de ese texto, dentro pondríamos la imagen que deseamos.
<a target="_blank" href="http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/articulos/1.php"><img src="mi_imagen.gif" border=0 width=100 height=30 /></a>

3.- Enlace que se abra en un popop

Este código se podría alterar un poco para que este enlace se abra en una ventana secundaria o popup. Para ello tenemos que utilizar un poco de Javascript por nuestra cuenta. <a href="javascript: void(0);" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.guiarte.com/','ventanacompartir', 'toolbar=0, status=0, width=650, height=450');">Compartir con popup</a>

Consideraciones adicionales al crear el botón para compartir en Facebook

Comento un par de detalles que son importantes y que podremos experimentar a la hora de hacer estos enlaces para compartir contenidos en Facebook. Indicar también el título del recurso:
Una cosa que he visto hacer en varios sitios es el envío de una cadena como titular de lo que se va a compartir. En el enlace para enviar un contenido a Facebook podemos indicar, además de la URL a compartir, el título que queremos se asigne a esta entrada dentro del muro de nuestro usuario. Esto lo señalamos enviando un parámetro adicional al crear la URL para enviar un enlace.
http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/&t=sitio%20interesante%20para%20desarrolladores
Ahora bien, según parece, Facebook recibe el título, pero luego al interpretar la página enviada lo cambia por el título real que tenga, con lo que parece que este contenido no sirve de mucho. Quizás sirva para algo en el caso que la página no tenga título o Facebook no lo pueda interpretar.
Convertir los datos a formato URL:
La otra cosa que quería comentar es la posibilidad de enviar los datos en la URL codificados en formato de URL. Este detalle en principio no es necesario en la mayoría de los casos, puesto que los navegadores ya hacen ese trabajo de manera transparente para los usuarios, pero sí sería recomendable.
Por ejemplo, este enlace tiene la URL a compartir codificada en el formato que, en principio, sería el adecuado:
http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.desarrolloweb.com%2Fmanuales
Ya digo que, si esto nos suena a chino, podemos olvidarnos de ello y en la gran mayoría de los casos, (al menos en todos los navegadores actuales) no habrá problemas.
Si queremos convertir una cadena a formato URL podemos utilizar un lenguaje de programación como PHP, con la función urlencode():
<a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode('http://www.desarrolloweb.com/manuales')?>">Compartir esto</a>
O incluso Javascript:
<script>
document.write('<a target="_blank" href="http://www.facebook.com/sharer.php?u=' + encodeURIComponent('http://www.desarrolloweb.com/php') + '">Compartir en Facebook</a>');
</script>

Referencia: El botón me gusta de Facebook es otra buena solución para añadir a tu artículo un toque social basado en las herramientas de Facebook. Si has encontrado algún problema con ese botón consulta el artículo Problema y solución sobre el Me Gusta de Facebook.

Si además estas interesado en crearte un botón similar para Twitter te recomiendo que te leas el artículo "Botón de compartir en Twitter".

Free Ecomerce Templates

Free Ecomerce Templates

este va: http://www.opencart.com/

---

http://www.enough.pro/5-free-responsive-ecommerce-templates-to-have-a-great-online-store/