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>   

¿Qué es Prototype?

Prototype es un framework en JavaScript que apunta al desarrollo sencillo y dinámico de aplicaciones web. Es una herramienta para el desarrollo de clases única y de fácil uso, además de la biblioteca más agradable de Ajax.

Con este pequeño código podemos hacer un sencillo menu contextual (esos menus a los que se accede con el botón derecho del ratón).

Es muy sencillo de realizar gracias a la ayuda de la librería prototype.

¿Qué es Prototype?

Prototype es un framework en JavaScript que apunta al desarrollo sencillo y dinámico de aplicaciones web. Es una herramienta para el desarrollo de clases única y de fácil uso, además de la biblioteca más agradable de Ajax.

Esta clase de Javascript nos permite agregar una ventana en nuestra página HTML.Esta clase se basa en Prototype, y el código se inspira en la biblioteca script.aculo.us.

Puedes incluso utilizar todos los efectos de script.aculo.us para mostrar y para ocultar ventanas si incluyes el archivo de effects.js, pero no es obligatorio.

Esta clase ha sido probado en los siguientes navegadores safari, Camino, Firefox e IE6.

Podrás descargar los archivos necesarios para utilizar este ejemplo en tu sitio web en el siguiente enlace a descarga ofrecido por blogus.xilinus.com

Características

* Ventanas de redimensionables
* Posibilidad de minimizar y maximizar
* Efectos visuales
* Editable
* Y más…

Cómo utilizarla

Es fácil utilizar, apenas incluye dos Javascript y un css (además dispones de diferentes skins).

Aqui os dejo un simple y breve ejemplo de esta clase Abre ventana Prototype

Primero debes incluir este trozo de cógido en tu ejemplo para enlazar con los dos javascript que necesitamos cambia la ruta en caso de que sea necesario.

</p> <script type="text/javascript" src="/javascripts/prototype.js"> </script><script type="text/javascript" src="/javascripts/window.js"> </script><link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css"></link>

Continua leyendo...