exibindo documentos html de várias seções - melhores práticas

5

Eu trabalho em uma organização de pesquisa e publicamos muitos documentos de grande porte, geralmente organizados em seções. O que eu quero saber é a melhor forma de apresentar esses documentos com várias seções em nosso site.

Atualmente, o que faço é carregar o documento inteiro como uma única página, com cada seção como sua própria div. Em seguida, mostro e ocupo as divs conforme necessário por meio de um sumário e dos botões "next" e "prev".

As vantagens para isso são principalmente: 1) que você pode se mover entre as seções muito rapidamente, 2) produz análises consistentes (quando uma página é carregada, eu sei que um relatório está sendo lido).

As desvantagens, no entanto, são reais:

  • Os leitores não podem aproveitar os botões de voltar / avançar do navegador para se mover entre as seções.
  • É complicado criar links diretos para seções individuais (eu posso fazer isso com javascript, mas não é fácil para outras pessoas pegarem e compartilharem).
  • Para relatórios longos, você precisa aguardar o carregamento completo do relatório antes de poder se movimentar (e isso pode incluir hordas de imagens e gráficos).

Outras pessoas pensam em maneiras melhores de organizar isso? Veja um exemplo do sistema atual: link

    
por ecpepper 07.06.2012 / 20:23
fonte

5 respostas

1

A melhor prática é fazer o desenvolvimento com base em AJAX . Para o histórico do navegador, você pode usar um plug-in como ajaxhistory se estiver desenvolvendo um javascript simples.

Se você estiver usando uma biblioteca como o jquery ou o protótipo , você pode usar um plug-in fornecido para eles. por exemplo, jquery-history-plugin

    
por 07.06.2012 / 21:58
fonte
0

Carregue apenas o resumo de um relatório na página. Se um usuário desejar ler mais, forneça um download de um PDF que contenha o relatório completo e tenha seções. Um resumo deve ter tudo que você precisa de uma perspectiva de SEO.

    
por 07.06.2012 / 21:30
fonte
0

Sua configuração não parece tão ruim assim. Para melhorar a experiência do usuário, você pode integrar as "mudanças de página" no histórico do navegador. Isso permitirá que os botões de voltar e avançar funcionem como esperado.

Além disso, você pode alterar o URL na barra de endereços do navegador sempre que ocorrer uma "alteração de página". Você não precisa recarregar a página para fazer isso. (Eu imagino que isso também faz parte da API de histórico dos navegadores.) Então as pessoas podem facilmente pegar um link para a "página" que estão lendo e compartilhá-lo. Quando um desses links é solicitado, você não precisa de muito (se houver) JavaScript para "navegar" para ele. Você pode simplesmente entregar a página como ela precisa ser.

Para um exemplo desses recursos, dê uma olhada em qualquer repositório de códigos do GitHub e navegue pelo código.

    
por 07.06.2012 / 21:40
fonte
0

Eu passei pelo link link e de acordo com minha observação. 1) O tamanho dos dados pretendidos é muito grande e está demorando muito para carregar o conteúdo completo da página. 2) A abordagem de navegação não é ruim, mas pode ser mais legível e continente. 3) Não há necessidade de lidar com o conteúdo da história.

Recomendações. 1) Não carregue o documento completo sobre a prática recomendada do evento onload seja para usar paginação ou para usar o Ajax para alterar dinamicamente o conteúdo de div ou página ...

2) Para melhorar a legibilidade, você pode fornecer tags de âncora que fornecerão os hiperlinks para navegar incontinentemente entre o conteúdo do documento. exemplo: Abordagem usada pela Wikipedia mais comum (seção de conteúdo).

3) No cenário atual como um usuário, se passar por um div ou página com conteúdo pesado, eu tenho que rolar muito, então eu vou recodificar que um div em particular deve ser rolável, e não a página completa, suponha apenas um div de cerca de 900X700 dimensão será rolável o i estará tendo controle completo sobre a barra de navegação, barra de conteúdo (como sugerido no segundo ponto), cabeçalho e rodapé também.

Obrigado

    
por 13.06.2012 / 08:03
fonte
0

O modelo front-end pode ser uma solução útil para você. Existem muitas estruturas para escolher e aumentaram em popularidade nos últimos anos. Dois exemplos são underscore.js e handlebars.js. Além disso, bigode.

Estes podem ser úteis como uma implementação correspondente do AJAX.

Se você estiver duplicando seu layout repetidamente ... o modelo é um bom fluxo de trabalho e otimização de manutenção.

Além disso, você teria que verificar o suporte para histórico, ancoragem e carregamento lento - mas é bem provável que um bom mecanismo de modelagem resolveria suas três desvantagens definidas.

associe-se ao exemplo comparação .

Tudo de bom, Nash

    
por 08.06.2012 / 22:34
fonte