E-Zine Exclusivo para o Whastapp

Dica & Exemplos: Como criar um site sem recarregar a cada clique num link

foto_ramos Dica & Exemplos: Como criar um site sem recarregar a cada clique num link

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.
foto_ramos Dica & Exemplos: Como criar um site sem recarregar a cada clique num link

De uma maneira conceptual, tem três opções:

#1 – Ficheiro único sem AJAX

Neste caso pode ter todo o conteúdo na mesma página. O conteúdo que não é para mostrar deve estar escondido com, por exemplo, display: none;

<div id="menu">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
<div id="conteudo">
<div class="a visivel">Conteudo A
<div class="b">Conteudo B</div>
<div class="c">Conteudo C</div>
</div>

CSS

#conteudo > div{
display: none;

}
#conteudo > div.visivel{
display: block;
}

Exemplo

#2 – Ficheiro único sem AJAX com tudo visível e com scroll

Neste caso pode ter um menu onde clicando dispara um scroll. Para isso precisa de ter âncoras para poder disparar um scroll até ali. Também dá para disparar o scroll procurando a posição/tamanho dos elementos mas é menos prático:

<div id=”menu”>
<div><a href=”#a”>A</a></div>
<div><a href=”#b”>B</a></div>
<div><a href=”#c”>C</a></div>
</div>
<div id=”conteudo”>
<div class=”a visivel”>Conteudo A
<div class=”b”>name=”b”>Conteudo B
<div class=”c”>name=”c”>Conteudo C
</div>

Exemplo

#3 – Ficheiros multiplos com AJAX

Neste caso tem ficheiros diferentes do lado do servidor e vai buscá-los via AJAX. Na função de resposta do AJAX carrega esse HTML na arte da página pretendida. Apagando o conteúdo inicial desse elemento/parte da página.

HTML

<div id=”menu”>
<div id=”a”>A</div>
<div id=”b”>B</div>
<div id=”c”>C</div>
</div>
<div id=”conteudo”>

jQuery

$(‘#menu > div’).on(‘click’, function (e) {
e.preventDefault(); // para impedir o link de ser seguido
url = ‘/shmD9/show’; // usado para o meu exemplo
var aClasse = this.id;
$.ajax({
url: url,
// aqui um parametro “data: variável,” é necessário
success: function (returnhtml) { // função corrida no sucesso do ajax
var tempText = (returnhtml.split(”))[1].split(”)[0]; // só util no meu exemplo
var divEnscolhido = $(‘

‘).append(tempText).find(‘.’ + aClasse); // só util
$(‘#conteudo’).html(divEnscolhido); // esta é a parte importante, onde o conteudo da div é substituído pelo novo
}
});
});

Exemplo

Considerações a ter em conta:

Ambos os métodos 1 e 3 são SEO un-friendly. Isto quer dizer que por exemplo o Google quando tentar indexar conteúdos da página vai ter problemas. Se a sua página não fôr bem indexada pelo Google então não tem conteúdo para mostrar nas buscas e vai ter menos visibilidade/visitas. No caso do google ele faz indexação de conteúdo escondido, mas não é garantido que outros façam. (E no caso da opção 3 é ainda pior)

Top
%d blogueiros gostam disto: