Vamos aprender a criar uma navegação AJAX sem perder a acessibilidade nem a usabilidade do site, isso é algo que sempre me perguntam como fazer, e geralmente o pessoal não faz da melhor forma possível.
Antes de mais nada, é importante lembrar que você precisa projetar seu site ou sistema sem pensar no javascript. Primeiro deixe tudo funcionando, e depois é que você deve colocar a camada de comportamento. Isso irá facilitar um bocado na hora de criar scripts não-obstrutivos.
Este tutorial está dividido em duas partes: nesta aqui vou ensinar a fazer a navegação via includes PHP e deixá-la funcionando antes de partir para o javascript, e na próxima irei ensinar a fazer a navegação propriamente dita.
Para que o site funcione mesmo sem javascript (o que é bastante importante quando estamos pensando em acessibilidade, mobilidade e SEO), e para que você possa estruturar seu site sem precisar incluir cabeçalhos em comum em todos os seus arquivos, é necessária a utilização de includes server-side. Com PHP é muito fácil de se fazer: crie a estrutura da página normalmente, e coloque o include na sua “div principal” (onde o conteúdo principal, aquele que muda entre as páginas, irá ficar), da seguinte forma:
<!-- Conteúdo principal --> <div id="conteudo_principal"> <?php if(isset($_GET['p'])) { include "./".$_GET['p'].".php"; } else { include "./home.php"; } ?> </div> <!-- Fim do conteúdo principal -->
Certo, agora nosso include já deve estar funcionando. Para chamar a página, basta criar um link com uma URL como esta: “index.php?p=nome_da_pagina”. Você também pode utilizar mod_rewrite para deixar a URL mais amigável (tipo “/nome_da_pagina”). Dependendo da página você pode também mudar o título (tag title), para manter uma diferenciação entre as páginas, isto você pode fazer criando uma função que retorne um nome amigável dependendo da página, e imprimir isto dentro da tag title. Claro que você não precisa mudar o title se não quiser, mas isto é bom em SEO.
Outra coisa que você provavelmente irá querer é alterar o ID da tag body para que possa ter uma diferenciação entre as páginas depois no CSS, para fazer isso, utilize um código mais ou menos assim:
<body id="<?=(isset($_GET['p']))? $_GET['p'] : 'home'?>">
Desta forma, o ID da tag body será sempre “#nome_da_pagina”, e caso não haja nenhuma página na URL, será “#home”.
Muito simples, não? Está pronta a primeira parte do nosso tutorial sobre navegação AJAX, estarei postando a próxima parte o mais breve possível, para que vocês não precisem esperar muito 
Qualquer dúvida, basta comentar.
parabéns pelo trabalho
acho que seria interessante alterar esta linha aqui
<body id=”">
por essa aqui
<body id=”">
creio que fique melhor, pois caso o servidor php não estaja habilitado o short tags dará erro.
continue com o bom trabalho
abraço
Paulo, você quer dizer trocar todos os “<?=…” por “<?php echo …”, certo?
Creio que o pessoal vai saber se tem ou não short tags ativado, isso sem contar que quase todos os servidores tem, e o meu código fica mais limpo
Obrigado por lembrar
[...] AJAX, vamos agora criar a parte do javascript para fazer a navegação AJAX propriamente dita. No tutorial anterior fizemos a navegação via includes, que é o primeiro passo para conseguirmos aplicar o javascript [...]
Foi isso mesmo que eu disse.
eu prefiro usar desta forma o código “<?php echo ”
tentei postar da primeira vez, mas não deu certo.
abraço
AH VAI SE f*** KA***** VAI FICA FAZENDO TUDO PELA METADE? SE NAO FOR ENSINA VAZA, POW ATÉ AGORA NADA DE CONSEGUIR COLOCA MUSICA NO SITE HTML SEM IFRAME..
Obrigado pelo comentário incrivelmente construtivo
Ele tem toda razão Inside.
Separar em 20 parte só vai deixar o tutotial uma m****.
Tente procurar fazer tudo direto.
Parabéns, muito bom velho, e acho que o reconhecimento é o máximo que posso te oferecer, mas espero que te motive cada vez mais para continuar “Mostrando conhecimento”
Valeu!