PushState como utilizar os seus recursos e suas funções?

[jadsonlucena 0]

Sendo bem direto, vou me basear neste exemplo que encontrei aqui no fórum: http://html5.gingerhost.com/

 

Gostaria que vocês me ajudassem com essas duas dúvidas?

 

1 - Olhando o código-fonte você perceberá que todos os conteúdos requisitados são de alguma forma inseridos nele.

 

Eu tentei usar o innerHTML na requisição do ajax mas não funfou.

 

 

2 - Mesmo as página não existindo ou sendo diretórios ou até mesmo sendo arquivos o server não redireciona e não gera o erro 404.

 

Eu tentei usar o htaccess :

RewriteEngine On

RewriteRule . /index.php [L]

Mas ele só que funcionar se for assim:

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

E desata forma ele irá ignorar os arquivos e diretórios.

 

 

Mesmo que você não saiba responder as duas dúvidas, qualquer contribuição será bem vinda!!!

[William Bruno 1501]

Eu tentei usar o innerHTML na requisição do ajax mas não funfou.

pq? qual foi o problema/erro ?

 

2 - Mesmo as página não existindo ou sendo diretórios ou até mesmo sendo arquivos o server não redireciona e não gera o erro 404.

Não redireciona nem acessando diretamente ?

 

 

Ficou só um pouquinho difícil de entender qual a dúvida, e no final vc não fez nenhuma pergunta.. só afirmações..

[jadsonlucena 0]

William Bruno, acredito que vc não olhou o link que postei, portanto vc não entendeu as minhas afirmações.

 

Tudo que escrevi foi em relação a análise do site referente ao link, pois estou fazendo o meu script em javascript e estou tendo dificuldades para replicar os recursos do link referencia.

 

pq? qual foi o problema/erro ?

Não é que o innerHTML não tenha funfado, ele infelizmente não está inserindo o conteúdo requisitado no código-fonte da page como a do link exemplo. Isto é referente ao SEO.

 

Não redireciona nem acessando diretamente ?

Eu gostaria de saber como fazer isso. Direcionar tudo para a index processar, inclusive diretório e arquivos. E não redirecionar a page para o arquivo ou diretório por motivos de segurança e também, não gerar um erro 404 se a url não for padrão.

[William Bruno 1501]

Tá.. mas qual a sua dúvida ? como vc tentou ?

 

Lá no site, tem todo o código utilizado, e ele funciona. O que exatamente vc não entendeu ?

Note que para o pushState fazer sentido, e o seu SEO funcionar bem, as suas páginas internas devem responder corretamente, se chamadas diretamente:

 

http://html5.gingerhost.com/new-york

 

 

Quanto a redirecionar tudo para a index, vamos deixar para depois, ok ?

(até pq 404 são páginas necessárias, e se todos os seus 404 responderem na tua home, o seu SEO será prejudicado).

[jadsonlucena 0]

Então vamos nos resumir no ajax.

 

Meu código é em puro javascript com uma simples requisição ajax utilizando o pushState e o onpopstate e por se esperar a requisição ajax me retorna os conteúdos dos arquivos tranquilamente.

 

Mas o que me intriga é: Como fazer com que o conteúdo requisitado seja inserido no código fonte da index. É algum elemento object novo (para o html5) ou algum método específico?

 

Pois em alguma página dos artigos do google eu li que o logaritmo dele, lê as página para obter uma busca mais apurada.

 

E este recurso que estou querendo saber fazer, colocaria meus sites em uma melhor colocação no ranking das buscas.

[William Bruno 1501]

Não existe isso =)

 

Sério.. só faz o pushState e faz o seu site responder a URL correta.

Vc tá confundindo o que tá acontecendo, onde não tem nada de mais, vc está achando que tem mágica..

[jadsonlucena 0]

William, então de boa, me explica como o cara fez para inserir o código fonte da página requisitada???

 

veja o código-fonte do site: http://html5.gingerhost.com/new-york

 

Isso ainda é um mistério para mim. ;-P

 

 

Porque se não existe, como isso acontece??? Estou endoidando???. rsrs

[William Bruno 1501]

Ele não inseriu..

Pensa um pouquinho comigo.. se vc tiver um arquivo:

 

new-york.html

 

e escrever um htaccess para que ele interprete php, e retire a extensão, vc vai conseguir acessar ele assim:

 

www.site.com.br/new-york

 

 

(sendo esse cara tendo includes de topo e rodapé)

 

certo ?

pronto. É só isso.

 

 

É só uma URL válida que responde corretamente a requisição GET. Tão simples qnto isso, sem nenhuma mágica.

[jadsonlucena 0]

Então você quis dizer que ele não esta fazendo requisições assíncronas e sim chamando a própria página, mas sem a extenção .php do arquivo? Ou ele estava utilizando uma requisição queriString?

 

Eu não entendi direito a sua explicação. Mas se você iniciar o vídeo da coluna direita em baixo e acessar os link horizontais (Home | Seattle | New York | London), você perceberá que o vídeo não será interrompido enquanto você navega no site. Isto é prova suficiente que ele está utilizando ajax e pushState. Mas como ele faz isto não tenho a minima ideia...

[William Bruno 1501]

São 2 coisas.

 

1. Qndo vc clica no link, é sim enviada uma requisição assincrona.

2. Qndo vc acessa a página, ela é respondida pelo server-side, sem nenhuma interferência do javascript client.

 

Entendeu ?

[jadsonlucena 0]

Então faça isto:

 

1 - Acesse o site: http://html5.gingerhost.com/

2 - Navegue tranquilamente em todas as página

3 - Em uma delas clique com o botão direito e escolha a opção "Exibir código-fonte da página"

4 - Vá na tag "<article class="post">"

 

 

Você constatará que de fato o conteúdo está sendo inserido de alguma forma no código-fonte da página.

 

E depois de tudo isso estarei esperando a sua defesa. Rsrsrs

[William Bruno 1501]

@jadsonlucena,

 

Vou fazer melhor que isso. Vou subir um sitezinho estático aqui.

Funciona da forma que eu disse.

[jadsonlucena 0]

Está certo, estarei a espera!!! :joia:

[Bonfim Junior 0]

Usa esse framework Jquey BBQ resolveu meus problemas ontem.

 

http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/

[jadsonlucena 0]

William Bruno, conseguisse fazer a sua mágica???

[William Bruno 1501]

@jadsonlucena, estive meio ocupado, segue o projetinho:

 

https://github.com/wbruno/static-server-ajax

 

Bom que já vou utilizá-lo para outras coisas também.