¿Para qué sirve shebang / hashbang (#!) En Facebook y nuevas URL de Twitter?

Acabo de notar que las URL largas y complicadas de Facebook a las que estamos acostumbrados ahora se ven así:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

Hasta donde puedo recordar, a principios de este año era solo una cadena normal similar a un fragmento de URL (comenzando con #), sin el signo de exclamación. Pero ahora es un shebang o hashbang ( #!), que anteriormente solo había visto en scripts de shell y scripts de Perl.

Las nuevas URL de Twitter ahora también presentan los #!símbolos. Una URL de perfil de Twitter, por ejemplo, ahora se ve así:

http://twitter.com/#!/BoltClock

¿ #!Ahora juega algún papel especial en las URL, como para un cierto marco de Ajax o algo así ya que las nuevas interfaces de Facebook y Twitter ahora están en gran parte Ajaxified?
¿Usar esto en mis URL beneficiaría de alguna manera mi aplicación web?

Esta técnica ahora está en desuso .

Esto solía decirle a Google cómo indexar la página.

https://developers.google.com/webmasters/ajax-crawling/

Esta técnica ha sido suplantada principalmente por la capacidad de usar la API de historial de JavaScript que se introdujo junto con HTML5. Para una URL como www.example.com/ajax.html#!key=value, Google verificará la URL www.example.com/ajax.html?_escaped_fragment_=key=valuepara obtener una versión de contenido que no sea AJAX.

El octothorpe / number-sign / hashmark tiene un significado especial en una URL, normalmente identifica el nombre de una sección de un documento. El término preciso es que el texto que sigue al hash es la porción de anclaje de una URL. Si usa Wikipedia, verá que la mayoría de las páginas tienen una tabla de contenido y puede saltar a secciones dentro del documento con un ancla, como:

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turingidentifica la página y Early_computers_and_the_Turing_testes el ancla. La razón por la que Facebook y otras aplicaciones basadas en Javascript (como mi propio Wood & Stones ) usan anclas es porque quieren que las páginas se marquen (como lo sugiere un comentario en esa respuesta) o admitan el botón de retroceso sin volver a cargar toda la página desde el servidor .

Para admitir los marcadores y el botón de retroceso, debe cambiar la URL. Sin embargo, si cambia la parte de la página (con algo parecido window.location = 'http://raganwald.com';) a una URL diferente o sin especificar un ancla, el navegador cargará toda la página desde la URL. Prueba esto en Firebug o en la consola Javascript de Safari. Carga http://minimal-github.gilesb.com/raganwald. Ahora en la consola de Javascript, escriba:

window.location = 'http://minimal-github.gilesb.com/raganwald';

Verá que la página se actualiza desde el servidor. Ahora escriba:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

¡Ajá! ¡No se actualiza la página! Tipo:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

Todavía no hay actualización. Use el botón Atrás para ver que estas URL están en el historial del navegador. El navegador se da cuenta de que estamos en la misma página pero que solo estamos cambiando el ancla, por lo que no se vuelve a cargar. Gracias a este comportamiento, podemos tener una sola aplicación Javascript que parece estar en el navegador en una 'página' pero que tiene muchas secciones marcables que respetan el botón de retroceso. La aplicación debe cambiar el ancla cuando un usuario ingresa diferentes 'estados', y de la misma manera si un usuario usa el botón de retroceso o un marcador o un enlace para cargar la aplicación con un ancla incluida, la aplicación debe restaurar el estado apropiado.

Así que ahí lo tiene: las anclas proporcionan a los programadores de Javascript un mecanismo para crear aplicaciones que se puedan marcar, indexar y que sean fáciles de usar. Esta técnica tiene un nombre: es una interfaz de página única .

ps Hay un cuarto beneficio para esta técnica: cargar el contenido de la página a través de AJAX y luego inyectarlo en el DOM actual puede ser mucho más rápido que cargar una nueva página. Además del aumento de velocidad, se pueden realizar más trucos como cargar ciertas partes en segundo plano bajo el control del programador.

pps Dado todo eso, el "estallido" o el signo de exclamación es una pista más para el rastreador web de Google de que se puede cargar exactamente la misma página desde el servidor en una URL ligeramente diferente. Ver Ajax arrastrándose . Otra técnica es hacer que cada enlace apunte a una URL accesible para el servidor y luego usar Javascript discreto para cambiarlo a un SPI con un ancla.

Aquí está el enlace clave nuevamente: el Manifiesto de la interfaz de página única

En primer lugar: soy el autor del Manifiesto de interfaz de página única citado por raganwald

Como ha explicado Raganwald muy bien, el aspecto más importante del enfoque de Interfaz de una página (SPI) utilizado en FaceBook y Twitter es el uso de hash #en las URL

El carácter !se agrega solo para fines de Google, esta notación es un "estándar" de Google para rastrear sitios web intensivos en AJAX (en los sitios web extremos de interfaz de página única). Cuando el rastreador de Google encuentra una URL con #!él, sabe que existe una URL convencional alternativa que proporciona el mismo "estado" de página, pero en este caso en el tiempo de carga.

A pesar de que la #!combinación es muy interesante para el SEO, solo es compatible con Google (que yo sepa), con algunos trucos de JavaScript puedes construir sitios web SPI compatibles con SEO para cualquier rastreador web (Yahoo, Bing ...).

El Manifiesto SPI y las demostraciones no usan el formato de !hash de Google , esta notación podría agregarse fácilmente y el rastreo SPI podría ser aún más fácil (ACTUALIZACIÓN: ¡ahora! La notación se usa y sigue siendo compatible con otros motores de búsqueda).

Eche un vistazo a este tutorial , es un ejemplo de un simple sitio de ItsNat SPI pero puede elegir algunas ideas para otros marcos, este ejemplo es compatible con SEO para cualquier rastreador web.

El problema difícil es generar cualquier "estado de página AJAX" (o seleccionado) como HTML simple para SEO, en ItsNat es muy fácil y automático, el mismo sitio está en el mismo tiempo SPI o página basado para SEO (o cuando JavaScript está deshabilitado) para accesibilidad). Con otros marcos web, puede seguir el enfoque de doble sitio, un sitio está basado en SPI y otra página basada en SEO, por ejemplo, Twitter utiliza esta técnica de "doble sitio".

Tendría mucho cuidado si está considerando adoptar esta convención hashbang.

Una vez que hashbang, no puedes regresar. Este es probablemente el problema más difícil. La publicación de Ben presentó el punto de que cuando pushState se adopta más ampliamente, podemos dejar atrás los hashbangs y volver a las URL tradicionales. Bueno, el hecho es que no puedes. Anteriormente dije que las URL son para siempre, se indexan y archivan y generalmente se mantienen. Para agregar a eso, las URL geniales no cambian. No queremos desconectarnos de todos los valiosos enlaces a nuestro contenido. Si ha implementado URLs hashbang en algún momento, entonces desea cambiarlas sin romper los enlaces, la única forma de hacerlo es ejecutando JavaScript en el documento raíz de su dominio. Siempre. No es temporal, estás atrapado con eso.

Realmente desea usar pushState en lugar de hashbangs , porque hacer que sus URL sean feas y posiblemente rotas, para siempre, es una desventaja colosal y permanente para los hashbangs.

Para tener un buen seguimiento de todo esto, Twitter, uno de los pioneros de las URL de hashbang y la interfaz de una sola página, admitió que el sistema de hashbang era lento a largo plazo y que en realidad comenzaron a revertir la decisión y volver a enlaces de la vieja escuela.

El artículo sobre esto está aquí.

Siempre asumí que lo que !acabo de indicar era que el fragmento de hash que seguía correspondía a una URL, con !el lugar de la raíz o dominio del sitio. Podría ser cualquier cosa, en teoría, pero parece que a la API de rastreo AJAX de Google le gusta de esta manera.

El hash, por supuesto, solo indica que no está ocurriendo una recarga real de la página, por lo que sí, es para fines AJAX. Editar: Raganwald hace un trabajo encantador al explicar esto con más detalle.

Las respuestas anteriores describen bien por qué y cómo se usa en Twitter y Facebook, lo que me perdí es una explicación de lo que #hace por defecto ...

En una aplicación 'normal' (no una sola página) puede anclar hasha cualquier elemento que tenga identificación colocando esa identificación de elementos en la url después del hash#

Ejemplo:

(en Chrome) Haga clic F12o Rihgt MouseyInspect element

luego tome id="answer-10831233"y agregue a la URL como sigue

/programming/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

y obtendrás un enlace que salta a ese elemento en la página

¿Para qué sirve shebang / hashbang (#!) En Facebook y nuevas URL de Twitter?

Al usarlo #de la manera descrita en las respuestas anteriores, está introduciendo un comportamiento conflictivo ... aunque no perdería el sueño ... ya que Angular se convirtió en algo estándar ...