Dynamic History – Introdução

Olá pessoal, já viram posts como esse várias vezes em muitos blogs e até aqui mesmo, nós sempre buscando uma alternativa para fazer o “botão voltar do Ajax” funcionar. Quando desenvolvi e adaptei aquele script baseado em idéias de outras pessoas, eu ainda não tinha entendido o conceito de navegação atual em páginas web, há algum tempo é que percebi diversas redundâncias no meu código e a dificuldade de adaptação por parte de diversas pessoas, além do meu script ter sido difícil de adaptar para além do que somente requisições Ajax, a grande dificuldade do pessoal era entender como funciona uma página web dinâmica. Apesar de diversos avisos de que às vezes usar Ajax é desnecessário, sempre tenho vontade de dar aquele gosto de uma aplicação para uma página web, mesmo não sendo obstrusivo (sempre faço minhas páginas rodarem sem nenhum Javascript primeiro e depois vou adicionando eventos em um arquivo separado do HTML) a principal dificuldade é a adaptação dos usuários. Se você fizer uma interface realmente convincente com javascript e CSS sem mexer no HTML o usuário passará a se comportar diferente na sua aplicação, diversos fatores que falarei depois tem que mudar quando fazer uma aplicação ao invés de página. Mas apesar disso tudo a janela do navegador sempre acaba com você! Voltar, Avançar, Atualizar, Favoritos e etc. sempre estarão presentes nele e você não quer colocar um aviso do tipo “Não use os comandos do seu navegador na minha aplicação” para seu usuário, não é? Pensando nisso que a Tabajara Organizations fez especialmente para você o novíssimo…. hehe, brincadeira, não resisti. Então para “resistir” ao browser existem muitas soluções, mas o ideal é que você entenda como funciona uma página HTML com Javascript.

Uma página web dinâmica é baseada em eventos, ações que reagem às interações do usuário, e muitos desses eventos são essenciais para a aplicação, fornecem conteúdo ou modificam a interface etc. Um exemplo é o Ajax que executa uma requisição respondendo a ação do usuário, que muitas vezes é clicar em algum link, essas requisições são essenciais para a aplicação, e modificam o conteúdo. Mas como estamos em uma página web e não em um aplicativo desktop, o usuário pode tentar “favoritar” sua página ao invés de copiar e colar o conteúdo, e como sua aplicação é constituída de uma única página que faz requisições assíncronas exibindo o resultado em alguma <div>, quando o usuário acessar sua página pelos favoritos a única coisa que irá ver é a página em seu estado inicial, sem o evento da requisição Ajax, o mesmo acontece com o botão voltar, avançar etc. que somente mudarão para outras páginas já que sua aplicação é constituída de uma única página. Esse só foi um exemplo em páginas com requisições assíncronas, mas outros eventos também precisam se comportar como sendo páginas e que precisam ser registrados. As tentativas de resolver esse problema foram muitas como citei no inicio.

Agora que vocês já devem ter entendido como funcionam eventos de uma aplicação e páginas web, mostrarei a vocês como usar o novo script que criei que serve para registrar eventos do usuário, é fácil e simples. Ele se baseia nas técnicas já existentes para registrar os eventos que são os Hashes e o iFrame. Basicamente o que ele faz é usar uma função fornecida por você e devolver um helper, outra função, que quando for usada, não importa quem chamará pode ser em links ou em linha de código etc., executará a sua função fornecida e registrará a ação em um histórico dinâmico sendo assim possível avançar, voltar, favoritar sua aplicação. Dentre os parâmetros desse helper, um será uma string chave que servirá para diferenciar um evento do outro, a função fornecida receberá esse parâmetro. Com o script você pode ter mais de uma ação associada ao histórico dinâmico, sendo elas definidas e diferenciadas por uma string identificadora (não é a string chave). No próximo post mostrarei como implementar, mas para exemplificar e mostrar os códigos você pode ir até a página de códigos que contém uma aplicação funcionando em Ajax com ele (um ótimo exemplo) e os códigos em si, ou também outro exemplo que salva o estado das páginas de um scroll com texto.

Leia agora Dynamic History – Implementando

Edit: O Júlio falou justamente isso no blog dele, agora que ví, o trecho aí em baixo:

Vale lembrar também que estou escrevendo códigos para cuidar do histórico para JavaScript, e não só Ajax (aliás, todas as soluções anteriores faziam isso, mas pouca gente se tocou).

Powered by ScribeFire.

Anúncios

4 Responses to Dynamic History – Introdução

  1. […] History – Implementando Antes de usar o Dynamic History é aconselhável que você leia uma introdução às páginas web primeiro, é rápido. Antes de continuarmos vou descrever como […]

  2. […] Bermonruf deu mais um passo para o script perfeito para histórico, em dois posts: Dynamic History – Introdução e Dynamic History – Implementando. Parabéns cara, muito […]

  3. Nossa cara, você é muito fera.
    Parabéns pela criação. Vai cair como luva pra muitos desenvolvedores.

  4. Aguinaldo disse:

    Olá, totalmente excelente este código, melhor ainda seria se tivesse o mesmo agregado a este outro esquema:
    http://www.ajaxianos.com.br/2008/06/convertendo-meus-links-para-ajax/

    tentei fazer funcionar no onclick, mas num deu, só no href mesmo, e com isso da pau.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: