¿Uso de # como variable?

[daPhyre]

Últimamente he visto que hay algunas páginas como esta:

miweb.com/mensajes/#seccion2

El punto es que este no envía a una sección de la página, si no a la página siguiente, como si fuera una variable de PHP.

¿Como se hace esto? ¿Como se recupera este valor para usarlo de esta forma? ¿Es JS? ¿PHP?

Gracias por las respuestas

[Mikmoro]

¿Podrías poner un ejemplo real? es que yo juraría que "miweb.com/mensajes/#seccion2" debería mandarte al elemento con ID "seccion2" del archivo index dentro de la carpeta "mensajes".

[buzu]

Yo lo he visto por ejemplo en apple.com (http://www.apple.com/trailers/#section=exclusive) y al parecer lo usan para lograr bookmark friendly websites usando ajax. En otras palabras, para permitir que se puedan almacenar en los bookmars sitios web en determinadas secciones cuando se usa ajax y que no pase como generalmente pasa que guardas una pagina y aparece siempre igual sin importar que cuando la guardasta hayas cargado contenido via ajax.

Me parece que es la tecnica que usaban los de swfaddress en sus inicios, pero no estoy seguro.

[HackmanC]

Hola,

Ese símbolo en la terminología de URL / URI se llama 'fragment'.

Según la especificación de URL/URI sirve para navegar a una parte (fragmento) de una página; y creo que ningún navegador re-envía el request si detecta que ya tiene el contenido; solamente lo utiliza del lado del cliente como apuntador.

Es lógico y útil usarlo dentro del mismo documento HTML o varios documentos diferentes, para navegar a otro documento e ir a una parte específica 'anchor' directamente. Pero esa funcionalidad es específica del HTML con la etiqueta <a>. El ejemplo más claro está en este foro en el 'permalink', no hay un 'refresh' al presionarlo y no llega al servidor, pero tampoco se usa Javascript, es funcionalidad del HTML.

Como 'normalmente' no llega al servidor en el protocolo HTTP y los browsers actuales, posiblemente lo manipulen con Javascript si se desea un funcionamiento diferente.

http://www.ietf.org/rfc/rfc3986.txt

Saludos,

ps:

El RFC no especifica que los URL y los fragment sean específicamente para manejo de documentos, así que se podría utilizar para navegar en un vídeo, una base de datos, etc., según el protocolo y el programa que esté instalado en el servidor. (Aunque se ha tomado como una cuestión de diseño de los browsers actuales, creo que originalmente se pensó que el fragmento debía llegar al servidor)

(Creo que PHP no tienen acceso al URL completo ni a los raw headers, aún si el browser hubiera enviado el 'fragment', así que creo no es posible adquirir esa parte del lado del servidor, o su funcionamiento será muy inestable 'entre navegadores').

[buzu]

HackmanC, tú estas hablando de la funcionalidad común del hash o fragment como tú lo llamas, pero eso ya lo sabemos. Lo que estamos discutiendo en este tema es el nuevo uso que se le está dando.

Iniciado por daPhyre

El punto es que este no envía a una sección de la página, si no a la página siguiente, como si fuera una variable de PHP.

Muy buena explicación de cualquier modo.

[HackmanC]

Hola,

Iniciado por buzu

... tú estas hablando de la funcionalidad común del hash o fragment como tú lo llamas, pero eso ya lo sabemos. ...

Exactamente, como no se cual es el nivel de conocimiento de cada quien que pregunta, primero expliqué desde lo más simple hasta lo más complejo, y exactamente ... así esperaba ... que esa parte ya la conociera. (El nombre 'fragment' no se lo dí yo)

Iniciado por buzu

... Lo que estamos discutiendo en este tema es el nuevo uso que se le está dando. ...

El punto es que este no envía a una sección de la página, si no a la página siguiente, como si fuera una variable de PHP.

Exactamente a eso me refería con la segunda parte, el nuevo uso no puede ser diferente al anterior. El 'fragment' NUNCA la obtiene PHP, JSP ni ASP, etc., y no se pueden usar como variables de PHP (posiblemente las nuevas versiones de algún lenguaje de servidor tenga acceso a dichos headers, pero no PHP <= 6.0 -- aunque sería inútil puesto que el browser (IE, Firefox, etc.) nunca lo envía --). Solamente que escribas tu propio browser que mande los 'fragment', o lo manipules con Javascript. (Disculpas si no se entendió)

Y es básicamente una respuesta directa a la pregunta inicial.

Si pones esto en el browser, desde PHP no se puede obtener el fragment:
Y si es un link, el browser nunca lo va a enviar al servidor:
http: //www.forosdelweb.com/f91/uso-como-variable-661315/ #post2739813
Solamente si estas usando algún tipo de servidor especial, o un lenguaje de programación especial.

Iniciado por HackmanC

... según el protocolo y el programa que esté instalado en el servidor. ... así que creo no es posible adquirir esa parte del lado del servidor, o su funcionamiento será muy inestable 'entre navegadores').

Saludos,

[Mikmoro]

Iniciado por Mikmoro

yo juraría que "miweb.com/mensajes/#seccion2" debería mandarte al elemento con ID "seccion2" del archivo index dentro de la carpeta "mensajes".

Como dice webosiris: "odio la autocita", pero creo que os estáis liando un poco. Eso lo puse a bote pronto, porque era lo que yo creía, pero ahora lo puedo constatar:

si yo hago una carpeta que se llame "fragment", dentro de ella pongo un index.html y en este un elemento cuyo ID sea "tabla", al poner en un archivo cualquiera un enlace que te mande a fragment/#tabla, o bien http://www.araudi.net/fragment/#tabla, nos lleva exactamente al index de esa carpeta al elemento con ID "tabla".
Sin más, y es bien lógico.

Este es el archivo:
http://www.araudi.net/fragment.html

que contiene este enlace:
<a href="fragment/#tabla" class="boton_menu">Siguiente</a>

y este otro:
<a href="http://www.araudi.net/fragment/#tabla" class="boton_menu">Siguiente</a>

que nos lleva a este archivo:
http://www.araudi.net/fragment/index.html

al elemento:
<h3 id="tabla">Rejilla de tabla</h3>

Y es fácil de usar para simular el botón siguiente o anterior como dice daPhyre en el primer mensaje, sólo cambiando de carpeta (no le veo mucha utilidad, pero bueno).

Como digo esto funciona perfectamente. Me extraña que tenga otro uso, porque interferiría con este. Si alguien ha puesto eso exactamente para darle otro uso con PHP o javascript, a mi juicio ha cometido un error.

[Triby]

A alguien le suena el usar tablas para maquetar?

No se si me "estoy proyectando", pero es un buen ejemplo de usar las herramientas para lo que no fueron creadas.

Se puede?, claro que se puede... es correcto?, concuerdo con Mikmoro en que no es correcto.

[HackmanC]

Hola,

Iniciado por Mikmoro

¿Podrías poner un ejemplo real? es que yo juraría que "miweb.com/mensajes/#seccion2" debería mandarte al elemento con ID "seccion2" del archivo index dentro de la carpeta "mensajes".

Perdón me hizo falta la cita a Mikmoro ... me lié bastante intentando dar una explicación que fuera más completa pero ... exactamente... ese es el uso y nada más.

Iniciado por Mikmoro

... Me extraña que tenga otro uso, porque interferiría con este. Si alguien ha puesto eso exactamente para darle otro uso con PHP o javascript, a mi juicio ha cometido un error.

Concuerdo completamente, con el agregado que es (casí) imposible hacerlo desde PHP normal. (Eso era lo que quería aclarar únicamente).

Saludos,

ps:

Un punto importante para comprender completamente mis dos mensajes anteriores, es el conocimiento que el browser no envía el 'fragment', él lo usa internamente para navegar y saltar entre páginas y fragmentos, pero no necesita enviarlo al servidor por los motivos que describí anteriormente. E intentaba explicarlo claramente.

No necesita enviarlo al servidor, PERO, posiblemente algunas veces se 'cuele' en el URL, aún así PHP no tiene acceso a esa parte del GET / POST. Y lo dejo allí, por que me voy a liar intentando explicar por qué no tiene acceso, que va a ser inestable entre browsers, cosas del HTTP, etc.

[buzu]

PHP no tiene acceso a ese hash o fragment, pero si javascript. Ahora, yo di un ejemplo en el que se usa de forma distinta o al menos así parece (el de la manzana) pero concuerdo con comentarios anteriores en que no es algo muy aconsejable, a menos claro que sea una forma de asegurar gracefull degradation de ajax lo cual aseguraría que el sitio siga funcionando en caso de que ajax falle, pero necesitaría hacer algunas pruebas antes de afirmar cierta idea.

[daPhyre]

Primero, gracias a todos por sus respuestas.

Ahora, dos ejemplos que tengo en este momento (Aunque he notado varios mas):

En gmail, cada comando tiene un link de este tipo, por ejemplo:

http://mail.google.com/mail/#compose

Aunque un ponga el link de forma directa, lo enviará a uno a la edición de un nuevo correo, y no es una subsección de la página.

Otro ejemplo es DeviantArt:

http://darkuriko.deviantart.com/gallery/#_featured--2

Como verán, la información cambia dependiendo "el fragmento". En un principio pensé que ocultaban parte con CSS y/o JS, pero con el segundo ejemplo, fue que comencé a suponer que podrían usar PHP o algo similar.

Ahora que lo comentan, suena lógico que sea posible con AJAX. Mi pregunta sigue con curiosidad ¿Como hacen esto? Ya preguntaría después si es conveniente, aunque por los comentarios parece que no.

[daPhyre]

-Mensaje repetido-

[HackmanC]

Hola daPhyre,

Iniciado por daPhyre

En gmail, cada comando tiene un link de este tipo, por ejemplo:

http: //mail.google.com/mail/#compose

Aunque un ponga el link de forma directa, lo enviará a uno a la edición de un nuevo correo, y no es una subsección de la página.

Tal ves por eso es que tengo que presionar 'volver a la versión anterior' en mi cuenta de gmail cuando uso Firefox ó Iceweasel y deseo enviar un mensaje nuevo. Google le han dado tantas vueltas al Javascript que tuvieron que desarrollar su propio browser. De seguro no usan el Apache y el php que todos usamos

Muy interesante.

Saludos,

[HackmanC]

Hola otra vez ,

Iniciado por daPhyre

... Ahora que lo comentan, suena lógico que sea posible con AJAX. Mi pregunta sigue con curiosidad ¿Como hacen esto? ...

Iniciado por buzu

PHP no tiene acceso a ese hash o fragment, pero si javascript. ...

Exactamente, y con Javascript puedes convertir cualquier link en una acción. (Inclusive que la convierta en otra URL, que le quite el fragmento y lo convierta en parametros, convertir POST en GET, etc.).

Saludos,

[Mikmoro]

Al menos en la versión de gmai que yo tengo, la dirección para redactar un mensaje nuevo es "http://mail.google.com/mail/?shva=1#compose", donde se usa el clasico "?shva=" para luego utilizando un script tipo:

function seleccionar(){
ele=(location.search).split('?shva=');
if(ele!=''){... (etc.)

dar acceso directo a esa dirección, cuyo contenido no existe sino se carga con ajax. Yo he utilizado esto para dar acceso directo a un contenido cargado con ajax, que de otra forma no estaría accesible sin entrar en la página inicial que lo carga, y supongo que lo usan para lo mismo.

[buzu]

y que de DA y apple? ya te digo, eso yo lo vi hace tiempo y sigo pensando que es para ajax como lo he venido diciendo desde mi primer post en este hilo.

[buzu]

ah, por cierto, yo tambien quiero saber como hacen para cambiar la url sin que se refresque la pantalla.

[Mikmoro]

Iniciado por buzu

y que de DA y apple? ya te digo, eso yo lo vi hace tiempo y sigo pensando que es para ajax como lo he venido diciendo desde mi primer post en este hilo.

No lo he entendido.

Iniciado por buzu

ah, por cierto, yo tambien quiero saber como hacen para cambiar la url sin que se refresque la pantalla.

¿Dónde exactamente? o ¿de dónde a dónde?

[buzu]

En deviantArt y en apple. En deviantArt tienes que tener suscripción con ellos para que funcione, pero en apple ve a la sección de Movie Trailes y navega entre las páginas de esa sección. Verás que cambia la url sin que se refresque la pantalla, o al menos eso parece. Igual si cambias digamos de Just Added a Exclusive en el menú podrás ver el efecto. También cuando usas SWFaddress se puede ver el efecto.

[HackmanC]

Hola,

En los tres casos, gmail, devianart y apple, se puede observar el clásico código spagetti de Javascript, con intención de ofuscar el código. (En gmail está claramente ofuscado en la versión que me muestra) y me tomaría mucho tiempo debuggear esos códigos para demostrar que evidentemente es Javascript. (Además que no se debe hacer ).

Pero en Apple (creo que es el más limpio), se puede observar que usan prototype y scriptaculous, y en varias partes redefinen varias clases con prototype:

Código:

....
	// Populates this control's view with the necessary contents
	_layout: function() {
		this.container = $(document.createElement('div'));
		this.container.addClassName('pagenav');

		this.previousControl = this._createControl('previous');
		this.container.appendChild(this.previousControl);
....

Posiblemente, (tomaría mucho tiempo demostrarlo), primero amarran un evento al click en ese link, (usando clases y prototype), al suceder el evento, cambian el contenido con Javascript, (mostrando, ocultando y generando partes), y por último navegan hacia esa misma página pero con el contenido nuevo (location).

Navegar de nuevo con location pareciera inútil, pero posiblemente se obtiene el objetivo que mencionaba buzu en su primer post:

... al parecer lo usan para lograr bookmark friendly websites usando ajax ...

Si hago un bookmark de la página 2, como Javascript siempre modifica la página, no solamente cuando presiono el vínculo a la página 2, siempre me va a llevar al lugar correcto, aunque inicialmente estuviera oculto o no existiera (lo va a mostrar con Javascript o posiblemente Ajax, como mencionaba Mikmoro usando parameters).

(Desde Javascript se pueden crear comportamientos muy complejos, pero en este caso no es una variable del lado del servidor)

Saludos,

[buzu]

los de SWFaddress usan 100% javascript.

[Mikmoro]

Iniciado por buzu

pero en apple ve a la sección de Movie Trailes y navega entre las páginas de esa sección. Verás que cambia la url sin que se refresque la pantalla, o al menos eso parece.

¿Podrías especificar esto un poco mejor? me pica ya la curiosidad, y no veo lo que dices. En imovie llego a una página cuya url efectivametne no cambia, pero es que todo está en la misma página, y usa prototype para un scroll vertical animado.

Vamos, que no he encontrado a qué te refieres.

[Triby]

Pero no cambia la URL, solo el marcador:

En apple, viendo las categorias de trailers
http://www.apple.com/trailers/#section=justhd

En deviantart navegando por paginas
http://tasastock.deviantart.com/gallery/#_featured--2

[buzu]

exacto triby, no toda la url, solo la última parte. Mik, no se como explicarte. ya te puse el enlace al que tienes que ir, navega entre las distintas paginas de los videos o los filtros (just added, etc)

[Mikmoro]

Pero es que ya lo he hecho y el resultado es el que comento más arriba: no veo que cambie la url porque se mantiene dentro de la misma página, moviéndose con prototype por ella a base de enlace internos hacia elementos con ID.
Es igual, no tiene importancia.

[Mikmoro]

Ah, mira esto:
en esta página por ejemplo http://www.apple.com/ilife/tutorials/#iphoto
hay un ul que contiene los enlaces, y cada uno de ellos cargará en la caja central
<div id="tutorial-content">
<div id="tutorial-container"></div>
<div id="tutoriallist-container"></div>
</div>

su propio contenido, a través de este script (y prototype + scriptaculous):

<script type="text/javascript" charset="utf-8">
Event.onDOMReady(function() {
var tutorial = $('pn-tutorials');
if (tutorial) {
var tutorialLink = tutorial.down('a');
var section = document.location.toString().replace(/http:\/\/[^\/]*\/[^\/]*\/([^\/]*)\//, '$1');
if ($('pn-tutorials').previous('li[id*='+section+']')) {
tutorialLink.href = tutorialLink.href+'#'+section;
}
}
});
</script>

[daPhyre]

Ahora he quedado confundido

Según entendí, esto hace AJAX y usan un código complejo para lograrlo.

Lo que no logro comprender es el código para aplicarlo (Dudo usarlo en el futuro, pero el gusano de la curiosidad ya pica en mi cabeza y deseo lograr el mismo efecto).

Me pondré a estudiar las funciones que han expuesto aquí para ver logro conseguir el efecto deseado. Muchas gracias

[DrogoPost]

Uh, yo venia a decir que eran simples anclas pero parece que no jejee

[daPhyre]

Solo una duda: ¿Cómo obtengo la dirección escrita en la barra de herramientas con JS?

[David]

Iniciado por daPhyre

Solo una duda: ¿Cómo obtengo la dirección escrita en la barra de herramientas con JS?

location.href

Ahora, en cuanto al tema, yo le veo bastante utilidad a eso al usar AJAX , como ya venía diciendo buzu (); no veo por qué sería algo malo.