Crea tu propio iGoogle con Prototype

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>

Definir el funcionamiento de las capas | “index.html”

Ahora que ya tenemos la estructura básica del portal creada tenemos que definir el comportamiento de cada uno de los bloques.

function init() {
portal = new Xilinus.Portal("#page div", {onOverWidget: onOverWidget,
onOutWidget: onOutWidget, onChange: onChange, removeEffect: Effect.SwitchOff});
portal.add(new Xilinus.Widget().setTitle("Widget #1.0").setContent(latin1), 0);
portal.add(new Xilinus.Widget().setTitle("Widget #1.1").setContent(latin2), 0);
portal.add(new Xilinus.Widget().setTitle("Widget #1.2").setContent(latin3), 0);
portal.add(new Xilinus.Widget().setTitle("Widget #2.0").setContent(latin2
+ latin3), 1);
portal.add(new Xilinus.Widget().setTitle("Widget #2.1").setContent(latin3), 1);
portal.add(new Xilinus.Widget().setTitle("Widget #1.4").setContent(latin1 +
latin2 + latin3), 2);

// Añadir botones de control
portal.addWidgetControls("control_buttons");
}
Event.observe(window, "load", init);

Personalizar el portal | “default.css”

Ya deberíamos tener nuestro portal practicamente funcionando, sólo nos queda darle la apariencia que deseemos. En este punto únicamente debemos tocar las hojas de estilo.

Estos son los estilos originales y los que debemos modificar para cambiar la apariencia de nuestro portal, se encuentran en “default.css”, para otras modificaciones tendremos que tocar en “page.css”:

.widget_nw {
	background:transparent url(default/top_left.gif) no-repeat;
	height:30px;
}     

.widget_w {
  border-left:1px solid #B9B9B9;
  margin-left:5px;
}

.widget_sw {
	background:transparent url(default/bottom_left.gif) no-repeat;
	height:15px;
}

.widget_title {
	background:  url(default/top_right.gif) repeat-x right top;
	color:#123456;
	font:bold 14px/25px Tahoma, Arial, sans-serif;
	height:26px;
	margin:0 0 0 15px;
	padding:5px 0 0 0 ;
	text-align:center;
	margin-left:15px;
}

.widget_content {
  background-color:#FDFDFD;
  color:#71777A;
  font:normal 12px/1em Tahoma, Arial, sans-serif;
  overflow:hidden;
  padding:5px;
  border-right:1px solid #B9B9B9;
  margin-right:5px;
}

.widget_statusbar {
	background:transparent url(default/bottom_right.gif)
repeat-x right top;
	font-size:8px;
	height:15px;
	margin-left:11px;
}   

.widget_draggable {
  cursor:move;
}   

.widget_ghost {
  background:#FFF;
  opacity: 0.5;
  filter:alpha(opacity=50);
  position:relative;
  border: 3px dashed #F00;
  margin:0px;
  padding:0;
}

Funcionamiento del “Portal Demo”

Las funcionalidades de este ejemplo son algo básicas, se pueden arrastrar y soltar los bloques y se pueden eliminar por medio de un enlace en la barra de título de cada uno de ellos.

Demo | Portal de prueba
iGoogle | iGoogle