Deep Linking: è possibile su un sito come questo?

[trentyrasor]

Salve a tutti,

volevo sapere se la tecnica di deep linking descritta in questo tutorial può essere in qualche modo applicabile al mio portfolio: http://andreamorimarchetti.com

Nel mio sito ogni pagina è in realtà un div inizialmente in stato di "display: none" e che viene mandato in fadeIn tramite jquery appena richiamato (spero sia abbastanza chiaro spiegato così).

Ovviamente il problema di questo tipo di soluzione è che se ad esempio provo ad accedere direttamente ad una pagina specifica (ad es. http://www.andreamorimarchetti.com/#/web/magitek) il sito ripartirà dalla prima pagina (o meglio primo div).

Ora giorni fa mi è stato consigliato di dare un'occhiata alla tecnica del deep linking appunto per ovviare questo problema, ma non sono sicuro sia applicabile al mio sito e vi chiedo dunque il vostro parere

grazie mille!!

[SimoX90]

Si tratta di una feature di html5. è supportata da tutti i browser moderni (purché aggiornati).
googla history api html5
e in particolare a te serve history.pushState(...parametri...)

Vedrai che è più semplice di quando sembra!
Un utile trick per la navigazione con i tasti del browser:
con questo metodo devi anche preoccuparti di intercettare quando l'utente naviga nella cronologia (avanti e indietro).
ti tornerà molto comoda la window.onpopstate=function load_page_in_the_url.

Poi, per rendere accessibile la pagina sull'url digitato all'onload leggi l'url e carichi il div specifico (di default lasci la home)

[trentyrasor]

Grazie per la risposta, ad oggi non ho avuto ancora tempo di provare ma in effetti mi intimorisce un po' la cosa, non so bene da dove partire anche perché leggendo il tutorial da me postato mi viene da pensare che dovrei separare tutto in pagine .html diverse e farle caricare dentro un'area apposita... tu consigli diversamente?

[SimoX90]

Se la pagina è in php ti basta dividerla in due parti: una strutturale e una che fornisca i contenuti su richiesta.

EDIT

QUESTO messaggio è stato scritto PER ERRORE, i moderatori possono cancellarlo!

[trentyrasor]

mmm no, è tutta html con le pagine che appaiono/scompaiono su comandi javascript

ad esempio, se sul menu web cliccherò su magitek accadrà questo:

$(function(){ $("#tre a").click(
function(){
var durata = 800;
var ritardo = 400;
var ritardo_b = 1000;
$(".web_nav, .back").fadeOut(durata);
$("#magitek").delay(ritardo_b).fadeIn(durata);
});
});

ovvero il menù web andrà in fadeout e il div contenente magitek apparirà.

Credi sia possibile controllare questo tipo di parametri con questa tecnica o mi consigli di separare tutto in pagine e richiamarle come nel tutorial di cui parlo sopra?

[SimoX90]

Ciao, ignora la mia risposta precedente che è la risposta giusta alla domanda sbagliata!
Dunque, no non devi separare nulla...

all'interno della tua function, per ogni "pseudo-link", devi richiamarti una funzione esterna simile a questa
[CODE]
function historyChangeUrl(id_link){//devi passargli qualcosa per sapere quale elemento è stato cliccato - va bene anche il link
if(history.pushState){//controlli che il browser possa gestire gli url, cerca in rete (è un pochino diversa)
var link;
switch id_link//ti ricavi il nuovo link
case ... case... case...//in base ai vari casi
history.pushState('','',link)//QUESTA è LA FUNZIONE CHE MODIFICA IL LINK NELLA BARRA URL
}

fatto questo di devi preoccupare di altre 2 cose:

se l'utente scrive www.tuosito.it/nuovourl.html
devi fare in modo di fare un redirect 404 (che conservi le variabili, è macchinoso ma su server linux si può fare, non so su windows) verso la pagina reale, e con il js leggere l'url e se corrisponde a una pagina del tuo sito ('fittizzia') allora fai partire le animazioni.

poi, visto che quando scrivi gli url con questo metodo la pressione dei pulsanti avanti e indietro del browser non funziona (anche se l'url cambia nella pagina non cambia nulla e non viene modificata) devi intercettare l'evento in cui l'url cambi in automatico, puoi usare window.onpopstate per farlo (tenendo conto che su safari tale evento viene rilevato anche durante la normale navigazione tra i link, è più facile da capire durante il debug)

EDIT
L'istruzione corretta per controllare se la history api è attiva sul browser è questa
if (window.history && history.pushState)

[trentyrasor]

Ok, un po' macchinoso ma vedo di darmi da fare, grazie mille intanto!

[SimoX90]

http://html5demos.com/history

qui c'è una demo che può tornarti utile!
(funziona il cambio degli url e la navigazione avanti e indietro - non funziona la digitazione diretta di uno dei link creati nella demo)