Para começar, vamos criar as primeiras camadas, do jeito mais simples possível para não confundir você com coisas que não importam agora. Vamos trabalhar com PHP porque é uma linguagem muito conhecida (embora eu odeie PHP.) O código é tão simples que eu não me animei em desenvolver versões Python ou ASP dele. Mas, se alguém quiser gastar cinco minutos para fazê-lo, nos avise que publicaremos aqui o link do seu trabalho para os interssados.
Há duas páginas php no processo, a index.php, em que você navega, e a funcoes.php, que contém as funções PHP necessárias e será também a página que será requisitada pelo Ajax. Comecemos pela index.php. Há um trecho assim no começo:
include("funcoes.php");
//Lê o parâmetro i (índice do conteúdo)
$i=1;
if(isset($_GET["i"]))$i=intval($_GET["i"]);
Aqui incluímos o arquivo de funções e lemos o valor i recebido na querystring. Se i não estiver presente, seu valor será 1. No menu os links são construídos assim:
<li><a href="?i=1"<?classi(1)?> title="Parte 1">Introdução</a></li> <li><a href="?i=2"<?classi(2)?> title="Parte 2">Objetivos</a></li> <li><a href="?i=3"<?classi(3)?> title="Parte 3">Site comum</a></li> <li><a href="?i=4"<?classi(4)?> title="Parte 4">Parte 4</a></li> <li><a href="?i=5"<?classi(5)?> title="Parte 5">Parte 5</a></li>
As chamadas à função classi servem para que o código class="selected" seja inserido no link atual (é isso o que deixa marcado o link atual no menu). O último código de interesse:
<div id="conteudo">
<?=leconteudo($i)?>
</div>
Aqui dizemos que, dentro do div conteudo, o PHP vai colocar o conteúdo (escolhido pelo valor de i na querystring). Agora vamos dar uma olhada no funcoes.php. O trecho que nos interessa agora:
/*
Lê o conteúdo de índice n. Aqui estou lendo de arquivos
html no disco, para não perdermos tempo com coisas que
fogem ao escopo do artigo. No mundo real, geralmente você
vai ler isso aqui do banco de dados, ou usar uma função
pronta disponibilizada por seu CMS.
*/
function leconteudo($n){
return file_get_contents("$n.html");
}
//Insere class="selected" se n=i
function classi($n){
global $i;
if($n==$i)echo ' class="selected"';
}
As funções são as mesmas que chamamos no index, de modo que acho que apenas os comentários já elucidam tudo (se você não entende PHP, contente-se em ler os comentários, é simples.)
Com isso já temos um site, funcionando.