Ads 468x60px

Perfil

lunes, 16 de septiembre de 2013

Convertir tu web estatica a Ajax

com.bydust.ajax es una Clase Javascript que convierte tu pagina estática a un verdadero sitio web Ajax.
Como funciona?
Cuando un usuario entra a tu sitio web, la clase realiza una comprobaciĂłn del navegador . Si es capaz de soportar Ajax la clases se activa y convierte tu web automáticamente, si no, la secuencia de comandos se desactivara y el usuario navegara en tu web sin hacer peticiones Ajax.
CaracterĂ­sticas
  • Es fácil de implementar y quitar
  • Filtra informaciĂłn necesaria que traera con Ajax
  • Puede añadir reglas para algunos enlaces
  • Animaciones personalizables
  • Permite retroceder de Pagina
ImplementaciĂłn
Primero que nada, bajarnos el .zip con los dos archivos Javascript (Descargar) , luego debemos incluir estos archivos en el head de cada pagina que deseamos convertir.
<head>
<script  src="js/com.bydust.array.js"></script>
<script  src="js/com.bydust.ajax.js"></script>
</head>
El Segundo paso sera especificar el contenido que debera recargar con Ajax, para esto clasificamos las secciones con divs y un identificador, el siguiente cĂłdigo sera guardado como
demo.html y como demo2.html con otro contenido en el div content, esto resultara dos paginas estaticas sin ninguna funciĂłn Ajax.
<div id="page">

  <div id="content">
  <!-- begin content -->
  Contenido Demo 1*
  <!-- end content -->
  </div>

  <div id="sidebar">
  <!-- begin sidebar -->
  <a href="demo.html" >demo 1</a> -
  <a href="demo2.html" >demo 2</a>
  <!-- end sidebar -->
  </div>

</div>
Para finalizar incluiremos esta rutina en todas la paginas que se requieran con Ajax y con ella nuestras paginas estaticas tendrán ahora funcionalidad Ajax.
window.onload = function(){
var refreshed_content = Array('!content','sidebar');
bda.start(refreshed_content); 
}
Aunque paresca mentira, su pagina ahora esta Ajaxificada, pruebenla y verán la funcionalidad. AquĂ­ puedes ver una demostraciĂłn de una dos paginas estaticas Ajaxificadas.
Recursos

0 comentarios: