Hoy en día proliferan en la red los sitios “tipo iGoogle“, este tipo de diseños son muy prácticos a la hora de tener un portal con capas móviles y que se puedan reposicionar al estilo de los portales citados (Netvibes, iGoogle).

Prototype Portal Class es una librería Javascript muy interesante para facilitarnos el desarrollo de este tipo de aplicaciones.

Esta demo está testeada para funcionar en Safari, Firefox, Opera e IE 6/7, como cabe esperar esta librería se basa en el uso de la potente Prototype, más en concreto en la versión Prototype 1.5.1.1. Si alguien todavía no sabe ¿Qué es Prototype?… es un framework basado en JavaScript que se orienta al desarrollo sencillo y dinámico de aplicaciones web con el uso de técnicas Ajax.

Portal de prueba

Protoype Portal Class

Para crear y personalizar “nuestro Portal” tendremos que seguir unos sencillos pasos:

• Crear el HTML
• Crear las capas
• Definir el funcionamiento de las capas
• Personalizar el portal

Crear el HTML | “index.html”

Para el correcto funcionamiento del portal necesitaremos hacer las llamadas para incluir las librerías necesarias, estos archivos se incluyen en la cabecera de nuestro HTML.

<link rel="stylesheet" href="page.css"
type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="default.css"
type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="builder.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
<script type="text/javascript" src="portal.js"></script>

Crear las capas | “index.html”

Una vez cargadas las librerías necesarias tenemos que crear las capas que usarán las funciones de las librerías y que compondrán la estructura básica de nuestro portal. Estas capas como se puede ver en el ejemplo se pueden reposicionar dentro de la página.

Tendremos una capa principal con tres columnas:

<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>