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:
Código :
Url: http://www.example.com/index.html#algo-aqui Hash: #algo-aqui
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);
Ejemplos:
Enlace con hash 1
Enlace con hash 2
Enlace con hash 3
(Todos los enlaces envian al mismo archivo pero con diferente hash)
Jquery y ajax
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..
Vamos a hacer una pequeña modificación del tutorial de ryuz en el que hace cargas de archivos html con jquery.
Este es el archivo modificado y el código está a continuación:
Código :
<!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..
Código :
http://www.example.com/seccion/#ds http://www.example.com/seccion/ http://www.example.com/seccion/#Com45 http://www.example.com/seccion/#445532q http://www.example.com/seccion/#file.html http://www.example.com/seccion/#6
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.
Les toca experimentar.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por CarlosRuminott el 25 de Marzo de 2009
Muchas gracias
Por Otaku RzO el 26 de Marzo de 2009
Por [Ray] el 26 de Marzo de 2009
Ahora veo como es que hacían esto, lo pondré en prática.
Gracias por el tip
Por jpcw el 26 de Marzo de 2009
Por zazk el 27 de Marzo de 2009
Por papuchyn el 28 de Marzo de 2009
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...?
My agradecido por sus respuestas
Por joch_basket el 29 de Marzo de 2009
Por ivanfc0o el 30 de Marzo de 2009
joch_basket-blog :
Las anclas son presisamente lo que expongo en el primer ejemplo.
Código :
Ejemplos de anclas
Por argesmanuel el 28 de Abril de 2009
Por Andros el 05 de Mayo de 2009
Por Arturo el 26 de Junio de 2010
Por pedro el 24 de Febrero de 2011
<?xml version="1.0" encoding="ISO-8859-1" ?>
- <doc cf="350" id="3507656628834" n_r="1" vf="7">
- <gr id="1">
- <oc id="1">
- <dsig:Signature Id="Signature001" xmlns:dsig="http://www.w3.org/2000/09/xmldsig#">
- <dsig:SignedInfo>
<dsig:CanonicalizationMethod Algorithm="http://www.w3.org/TR/2001/REC-xml-c14n-20010315" />
<dsig:SignatureMethod Algorithm="http://www.w3.org/2000/09/xmldsig#rsa-sha1" />
- <dsig:Reference URI="">
- <dsig:Transforms>
<dsig:Transform Algorithm="http://www.w3.org/2000/09/xmldsig#enveloped-signature" />
</dsig:Transforms>
<dsig:DigestMethod Algorithm="http://www.w3.org/2000/09/xmldsig#sha1" />
<dsig:DigestValue>xhaMf8NafHnkczMfuTVAOD88H6s=</dsig:DigestValue>
</dsig:Reference>
- <dsig:Reference URI="#KeyInfo001">
<dsig:DigestMethod Algorithm="http://www.w3.org/2000/09/xmldsig#sha1" />
<dsig:DigestValue>7GBiHVAW5+S/LI8h4r9AKK22evc=</dsig:DigestValue>
</dsig:Reference>
</dsig:SignedInfo>
<dsig:SignatureValue>rBLG6cDwiWIcPk6tfHhnX2OKnRIU2bgHiEdS+OtjGQfrZpXBHbZewQMgnXvphZ/Kp12MABTQ+4Ue9hVqFkpZQf2Z+Qi/2Gwg9krXQ2GHBQwNheyG8HPDSUExi634SnWvy3ILPTH/V9yn/RxwTlpXm/wxK2j7IOkVnSp5TQh/nf69uL1zH4tdGT9tvFDy/SFuhIIdqcRuO5r1Ymer1RSFo9TnZ+qv8LRgojzlY1SEXyk8za98IZlyC0FCpfPDuZuv3HnvmY60T5KKQ72BnXFy/HdVjao6Vj1W0/rlIWXMm75ggjs4bNuOxZDDxE00i1eVPop1gDO8DVuuEw2X1Wx2Ug==</dsig:SignatureValue>
- <dsig:KeyInfo Id="KeyInfo001">
- <dsig:X509Data>
<dsig:X509Certificate>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</dsig:X509Certificate>
</dsig:X509Data>
</dsig:KeyInfo>
- <dsig:Object>
- <dsig:SignatureProperties>
- <dsig:SignatureProperty Id="TimestampId" Target="Signature001">
- <wsu:Timestamp xmlns:wsu="http://schemas.xmlsoap.org/ws/2002/07/utility">
<wsu:Created>2009-11-11T19:27:52</wsu:Created>
</wsu:Timestamp>
</dsig:SignatureProperty>
</dsig:SignatureProperties>
</dsig:Object>
</dsig:Signature>
<cs id="1" v="2009" />
<cs id="3" v="10" />
<cs id="4" v="3507656628834" />
<cs id="5" v="802001825" />
<cs id="6" v="3" />
<cs id="7" v="" />
<cs id="8" v="" />
<cs id="9" v="" />
<cs id="10" v="" />
<cs id="11" v="C.G.H & CIA LTDA" />
<cs id="12" v="1051064" />
<cs id="24" v="false" />
<cs id="25" v="" />
<cs id="26" v="" />
<cs id="27" v="0" />
<cs id="28" v="0" />
<cs id="29" v="0" />
<cs id="30" v="0" />
<cs id="31" v="0" />
<cs id="32" v="0" />
<cs id="33" v="162000" />
<cs id="34" v="0" />
<cs id="35" v="0" />
<cs id="36" v="0" />
<cs id="37" v="0" />
<cs id="38" v="0" />
<cs id="39" v="0" />
<cs id="40" v="0" />
<cs id="41" v="0" />
<cs id="42" v="0" />
<cs id="43" v="0" />
<cs id="44" v="162000" />
<cs id="45" v="0" />
<cs id="46" v="198000" />
<cs id="47" v="0" />
<cs id="48" v="198000" />
<cs id="49" v="0" />
<cs id="50" v="0" />
<cs id="51" v="0" />
<cs id="52" v="360000" />
<cs id="53" v="0" />
<cs id="54" v="360000" />
<cs id="55" v="0" />
<cs id="56" v="0" />
<cs id="57" v="0" />
<cs id="58" v="0" />
<cs id="59" v="0" />
<cs id="60" v="" />
<cs id="61" v="" />
<cs id="62" v="" />
<cs id="63" v="" />
<cs id="64" v="" />
<cs id="65" v="" />
<cs id="66" v="" />
<cs id="67" v="" />
<cs id="68" v="" />
<cs id="69" v="" />
<cs id="70" v="" />
<cs id="71" v="" />
<cs id="980" v="0" />
<cs id="981" v="" />
<cs id="982" v="" />
<cs id="983" v="" />
<cs id="986" v="1" />
<cs id="987" v="" />
<cs id="994" v="false" />
<cs id="995" v="34022891" />
<cs id="996" v="91000076744095" />
<cs id="997" v="" />
<cs id="999" v="20090431439361" />
</oc>
</gr>
</doc>
Por lorenaFLASH el 24 de Febrero de 2011
TEngo un campo donde el usuario escribe una URL cuando le de enter este se agrega como http://www.miweb.com/index.html#URL
Lo que deseo es que me lea lo que hay despues del # es decir la URL y esta se me carga en una parte dentro del inde.html .... esta herramienta window.location.hash" me puede servir ... o como lu puedo hacer
Por cristian el 30 de Enero de 2012
pedro, por favor posteá tus dudas en el foro que sino jodes la lista de comentarios. por favor.
Por Manuel Mora el 09 de Junio de 2012
Por guitarleo el 09 de Junio de 2012
Por Alejandro rivera el 06 de Diciembre de 2017