Vamos a darle un empujoncito al tema... Para este ejemplo vamos a emplear el sistema de carga de contenidos via AJAX de DYNAMICDRIVE (Ajaxtab) y para que podamos ver lo sencillo que será adaptar nuestro proyecto inicial haciendo simplemente unos cuantos cambios, vamos a ver primero el código HTML sin modificar y despues las modificaciones que añadiremos:
CÓDIGO ORIGINAL: Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">
/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<h1>SEO Vs AJAX TAB - Visibilidad de cara a motores de busqueda</a></h1>
<p align="justify">
En este ejemplo ganaremos tantos enlaces como secciones definamos en nuestro proyecto sin perder la usabilidad
de la carga de AJAX y garantizando una navegación limpia a los usuarios que lleguen a nuestro gracias a los
resultados de busqueda.
</p>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html> Que vamos a convertir en el siguiente, agregando al pie un menu con los enlaces construidos con el traspaso de variable necesario para desarrollar nuestro ejemplo y el código necesario para ganar de entrada las METAS básicas
CÓDIGO MODIFICADO: Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">
/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<?php
if($_GET['seccion']!=""){
switch $_GET['seccion']{
case "portafolio":
?>
<title>Portafolio - Proyecto</title>
<meta name="description" content="Descripcion, bla, bla, bla" />
<meta name="keywords" content="bla, bla, bla..." />
<?
break;
case "acerca":
?>
<title>Acerca de - Proyecto</title>
<meta name="description" content="Descripcion, bla, bla, bla" />
<meta name="keywords" content="bla, bla, bla..." />
<?
break;
case "contacto":
?>
<title>Contacto - Proyecto</title>
<meta name="description" content="Descripcion, bla, bla, bla" />
<meta name="keywords" content="bla, bla, bla..." />
<?
break;
default:
?>
<title>Proyecto</title>
<meta name="description" content="Descripcion, bla, bla, bla" />
<meta name="keywords" content="bla, bla, bla..." />
<?
break;
}
}
?>
</head>
<body>
<h1>SEO Vs AJAX TAB - Visibilidad de cara a motores de busqueda</a></h1>
<p align="justify">
En este ejemplo ganaremos tantos enlaces como secciones definamos en nuestro proyecto sin perder la usabilidad
de la carga de AJAX y garantizando una navegación limpia a los usuarios que lleguen a nuestro gracias a los
resultados de busqueda.
</p>
<ul id="countrytabs" class="shadetabs">
<li><a href="portada.html" <? if($_GET['seccion']==""){ echo "class='selected'";} ?> rel="countrycontainer">Portada</a></li>
<li><a href="portafolio.html" <? if($_GET['seccion']=="portafolio"){ echo "class='selected'";} ?> rel="countrycontainer">Portafolio</a></li>
<li><a href="acerca.html" <? if($_GET['seccion']=="acerca"){ echo "class='selected'";} ?> rel="countrycontainer">Acerca de</a></li>
<li><a href="contacto.html" <? if($_GET['seccion']=="contacto"){ echo "class='selected'";} ?> rel="countrycontainer">Contacto</a></li>
</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p align="right">
<a href="#" title="Portada">Portada</a> | <a href="proyecto.com/index.php?&seccion=portfolio" title="Portafolio">Portafolio</a> |
<a href="proyecto.com/index.php?&seccion=acerca" title="Acerca de">Acerca de</a> | <a href="proyecto.com/index.php?&seccion=contacto" title="Contacto">Contacto</a>
</p>
</body>
</html>