visualizzazione di documenti html a più sezioni - best practice

5

Lavoro presso un'organizzazione di ricerca e pubblichiamo molti documenti di grandi dimensioni, solitamente organizzati in sezioni. Quello che voglio sapere è il modo migliore per presentare questi documenti multi-sezione sul nostro sito web.

Attualmente, quello che faccio è caricare l'intero documento come una singola pagina, con ogni sezione come propria div. Poi mostro e nascondo divs secondo necessità tramite un indice e i pulsanti "next" e "prev".

I vantaggi di questo sono principalmente: 1) che puoi spostarti tra le sezioni molto velocemente, 2) produce analisi coerenti (quando una pagina viene caricata, so che un rapporto è in fase di lettura).

Gli svantaggi, tuttavia, sono reali:

  • I lettori non possono sfruttare i pulsanti Indietro / Avanti del browser per spostarsi tra le sezioni.
  • È complicato creare collegamenti diretti a singole sezioni (io posso farlo con javascript ma non è facile per gli altri afferrare e condividere).
  • Per i rapporti lunghi, devi attendere il caricamento del rapporto completo prima di poterlo spostare (e che può includere orde di immagini e grafici).

Altre persone hanno idee su modi migliori per organizzare questo? Ecco un esempio del sistema attuale: link

    
posta ecpepper 07.06.2012 - 20:23
fonte

5 risposte

1

La best practice è fare lo sviluppo basato su AJAX . Per la cronologia del browser puoi quindi utilizzare un plug-in come ajaxhistory se stai sviluppando su un semplice javascript.

Se utilizzi una libreria come jquery o prototype , quindi puoi utilizzare un plug-in fornito per questi. ad esempio, plug-in jquery-history

    
risposta data 07.06.2012 - 21:58
fonte
0

Carica solo l'abstract di un report sulla pagina, se un utente vuole leggere di più fornisce un download di un PDF che contiene il report completo e ha sezioni. Un abstract dovrebbe avere tutto ciò di cui hai bisogno da una prospettiva SEO.

    
risposta data 07.06.2012 - 21:30
fonte
0

La tua configurazione non sembra affatto male. Per migliorare l'esperienza utente è possibile integrare le "modifiche alla pagina" nella cronologia del browser. Ciò consentirà ai pulsanti Indietro e Avanti di funzionare come previsto.

Inoltre, puoi cambiare l'URL nella barra degli indirizzi del browser ogni volta che si verifica un "cambio di pagina". Non è necessario ricaricare la pagina per fare ciò. (Immagino che questo faccia parte anche delle API di cronologia dei browser.) Quindi le persone possono facilmente prendere un link alla "pagina" che stanno leggendo e condividerle. Quando viene richiesto uno di questi collegamenti, non è necessario molto (se non nessuno) JavaScript per "navigare" su di esso. Puoi semplicemente consegnare la pagina come deve essere.

Per un esempio di queste funzionalità, dai uno sguardo a qualsiasi GitHub repository di codice e sfoglia il codice.

    
risposta data 07.06.2012 - 21:40
fonte
0

Ho seguito il link link e secondo la mia osservazione .. 1) La dimensione dei dati previsti è enorme e richiede molto tempo per caricare il contenuto completo della pagina. 2) L'approccio alla navigazione non è male ma può essere più leggibile e continente. 3) Non è necessario occuparsi del contenuto della cronologia.

Raccomandazioni. 1) Non caricare il documento completo sulle best practice sugli eventi onload o utilizzare la paginazione o usare Ajax per modificare dinamicamente il contenuto di div o pagina ...

2) Per migliorare la leggibilità è possibile fornire tag di ancoraggio che forniranno i collegamenti ipertestuali per navigare in modo incontinente tra il contenuto del documento. esempio: approccio utilizzato dalla più comune Wikipedia (sezione dei contenuti).

3) Nello scenario attuale come utente se si passa attraverso un div o una pagina con un contenuto pesante devo scorrere molto, quindi correggerò di nuovo che un particolare div deve essere scorrevole, non la pagina completa supponiamo solo un div di circa 900X700 la dimensione sarà scorrevole e avrò il controllo completo su barra di navigazione, barra del contenuto (come suggerito nel 2 ° punto), intestazione e piè di pagina.

Grazie

    
risposta data 13.06.2012 - 08:03
fonte
0

Il front-end Templating può essere una soluzione utile per te. Ci sono molti quadri tra cui scegliere e sono aumentati di popolarità negli ultimi anni. Due esempi sono underscore.js e handlebars.js. Inoltre, Moustache.

Questi possono essere utili come implementazione corrispondente di AJAX.

Se ti ritrovi a duplicare il tuo layout più e più volte ... i templating sono un buon flusso di lavoro e ottimizzazione della manutenzione.

Inoltre, dovresti controllare il supporto per la cronologia, l'ancoraggio e il caricamento lento, ma è molto probabile che un buon motore di templating risolva i tuoi tre svantaggi definiti.

link all'esempio confronto .

Tutto il meglio, Nash

    
risposta data 08.06.2012 - 22:34
fonte

Leggi altre domande sui tag