Hace tiempo vimos gracias a dano que el hash puede ser útil para flash. Sin embargo, ahora que están tan de moda las aplicaciones RIA, grandes como facebook y gmail dan unos excelentes usos para el hash útilizando javascript y ajax para dar mejor experiencia al usuario.
Primero que nada.. ¿Qué es el hash?
El hash es el contenido de una url que parte desde el signo de numero(#). Ej:
La forma más común de utilizarse y que quizás mucho ya conocen es la de hacer un scroll en la pantalla a la etiqueta HTML con esa ID asignada.
Si en la url el hash indica, por ejemplo.. #4 (http://www.dominio.com/pagina.html#4); el navegador desplazará la pantalla hasta el elemento qué posea ese ID. Aquí tienen un ejemplo para que quede claro.
Hash con javascript
La forma de obtener el hash con javascript es la siguiente:
Código :
window.location.hash;
Sería práctico almacenarlo en una variable si lo vas a utilizar.
Código :
var jash = window.location.hash;
Ahora para empezar a trabajar con él haremos un pequeño script, quizás inútil pero servirá de referencia. Lo que haremos será mostrar una alerta con el contenido del hash que se tenga en la barra de direcciones.
Código :
// obtenemos el hash
var jash = window.location.hash;
// lo imprimimos
alert("Tu hash es: "+jash);
Primero que nada aclaro, usaré jquery para evitar adentrarnos en ajax directamente, es un tip para manejar el hash y si sabes utilizar ajax, facilmente podrás adaptarlo a tus necesidades.
Una de las GRANDES desventajas de hacer cargas asycronas(ajax) es que lo hacen sin mover nada en la url y al intentar compartir la url con un amigo o por email es muy probable que el destinario no vea exactamente lo que tú estás viendo; pero por supuesto, esto puede cambiar con hash. Hagamos un experimento..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabs con hash y ajax</title>
<script type="text/javascript" src="/jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
//###### Código agregado para detectar si hay hash
//obtener hash
var jash = window.location.hash;
// comprobamos si existe un hash valido
if(jash.length > 1){
// si existe buscamos el enlace que contiene ese hash en el href y cojemos su atributo "title"
var href = $("a[@href="+jash+"]").attr("title");
// cargamos la página que se solicita vía hash
$("#show").load(href);
}
//######
//código del menu, nada nuevo aquí
$("#nav a").click(function(){
var href = $(this).attr("title");
$("#show").load(href);
});
});
</script>
</head>
<body>
<!-- menu -->
<ul id="nav">
<li><a href="#default" title="e1.html">Inicio</a></li>
<li><a href="#enlace2" title="e2.html">Enlace 2</a></li>
<li><a href="#enlace3" title="e3.html">Enlace 3</a></li>
<li><a href="#enlace4" title="e4.html">Enlace 4</a></li>
<li><a href="#enlace5" title="e5.html" >Enlace 5</a></li>
</ul>
<!-- contenedor donde cargaremos el html externo -->
<div id="show"></div>
</body>
</html>
No entraré en detalles respecto a la modificación, si ya leíste y entendiste el tip de cómo crear cargas html externas con jquery supongo que entenderás la modificación que hice con sólo ver el código.
Está bien, explico un poco.. Con esta modificación que hice agregamos/cambiamos el hash de la url haciendo que la url sea diferente en cada sección, y lo más importante, detectamos si existe un hash válido y mostramos la sección que se solicita. Si no lo vieron arriba aquí tienen de nuevo el enlace. De esta manera te puedo enviar directamente a la sección numero 4.
Tengo que aclarar que aunque el hash puede tener un uso muy potente para seo, como podrán ver en este enlace (vídeo en ingles); no debería ser el remplazo de las urls amigables y permalinks básicos que ya todos conocemos. Google NO toma en cuenta el hash al momento de indexar, por lo que estas urls..
Son exactamente la misma sección para google y demás motores de búsqueda. Sólo aclaro.
Bueno, es todo.. Espero les haya sido útil, estos sólo fueron unos ejemplos básicos pero se pueden hacer cosas muy interesantes con el hash para dar interactividad y usabilidad a tus aplicaciones.
Ahora veo como es que hacían esto, lo pondré en prática.
Gracias por el tip Por:[Ray]
Interesante pero no le veo su aplicacion que ayude en verdad!..... leere sobre SEO Por:jpcw
Pero el problema sigue siendo la navegación, me gustaría que los botones de adelante y atras funcionen cómo cuando se navega en cualquier página el problema es que cuando lo he implementado eh tenido que verificar con un setInterval si ha cambiado el Hash. Por:zazk
Ustedes que son entendidos , me podrian ayudar en lo siguiente, a lo mejor es muy facil y yo soy el que me hago bolas, PROBLEMA. A mi Outlook llegan correos DE TODO TIPO, mediante un filtro coloco en carpetas los que me interesan, yo quiero fowerdear estos correos, pero recortandoles la cabecera y el pie porque son publicidad.
AQUI VIENE LA PREGUNTA
Existe alguna manera de cortar cabecera y pie automaticamente ants de renviar ?
Hay algun programa que haga esto automaticamente ?
PHP podria servir para hacer esto ?
Cuales serían las Soluciones...?
