Como crear un startup?

Prototype, xilinusTe gusta netvibes? te gustaria hacer algo parecido talves no un startup pero si una aplicacion funcional y que se pueda adaptar bien y usar bloques del mismo modo que lo hacen ahi no solo el startup de netvibes hay muchos mas entre ellos el de google, yahoo y otros.

Pues bueno en xilinus que ya estan acostumbrandonos a sacar clases basadas en prototype bastante completas y de muy buena calidad ahora sacan esta Prototype Portal Class.

Aqui les dejo el ejemplo de como aplicarlo:

Primero el HTML facil y sencillo:

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

Toca el archivo CSS aun mas facil:

#page {margin: 10px auto;}    #widget_col_0 {    float:left;    width: 30%;    }    #widget_col_1 {    width: 50%;    float:left;    }    #widget_col_2 {    float:left;    width: 20%;    }

Ahora iniciamos la clase:

    var  portal = new Xilinus.Portal("#page div")

Y por ultimo añadamos las cajitas (widgets) =P

portal.add(new Xilinus.Widget(), 0)// Or with title and contentportal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);

Eso es todo nada dificil pero ahora quieres mas estilo mas bonito mas funciones aqui les pongo mas de esto:

  • url: Url a la que se hace una peticion despues de mover un widget (default null, no requests)
  • onOverWidget: Un evento para ejecutar cuando el mouse este sobre el widget (default null)
  • onOutWidget: Evento para cuando el mouse ya quite de encima del widget (default null)
  • onChange: Evento para ejecutar algo cuando termines de mover el widget (drag & drop) (default null)
  • onUpdate: Evento para ejecutar cuando termines de ejecutar un accion drag & drop (default null)
  • removeEffect: Remueve un efecto animado (sin efectos por default)

Muchas funciones no lo creo se podrian hacer mas pero bueno aqui lo basico para crear este portal:

  • add(widget, columnIndex): para añadir un nuevo widget .
  • remove(widget): remueve un widget.
  • serialize(): Convierte un string a parametros para el request de lajax.

Batante bueno el tip no creen? puede ser muy util creo ya se donde lo aplicare, ya pueden hacer su propio startup bueno casi falta mucho jeje pero lo basico ya lo tiene un poquito de CSS y JS es mas que suficiente.

Ver ejemplo / Descargar Script widgets.js

comment ¿Que opinas?

Artículos recientes

close

TGIF: Magikarp Jump, el nuevo y absurdo juego de Pokémon para móviles

Magikarp Jump es el nuevo juego para móviles Android y iPhone basado en el universo de Pokémon; esta “broma” de juego es genial en muchos aspectos, no obstante, también es ridiculo en otros. Magikarp Jump…

close

KFC transforma su clásica cubeta en una contador de cuentos

KFC Suppertime Stories es una apuesta de KFC en América del Sur; la cual, es encabezada por su nuevo diseño interactivo de Packaging, el cual,  transforma la clásica cubeta de KFC en una lampará cuenta…

close

Diseños de lámparas origami inspiradas en animales

OWL paperlamps es la empresa encargada del diseño y elaboración de estas geniales lámparas de origami inspiradas en diferentes animales. Cabe señalar, que estas pueden ser adquiridas la tienda de Etsy; esto claro mediante un módico…

close

Creativas campañas para crear conciencia sobre el calentamiento global

El calentamiento global es un hecho y cada vez es más evidente en todas las ciudades del mundo; inviernos más crudos y terribles sequías forman parte del día a día en las noticias a nivel…

close

Lista de estrenos en Netflix para Junio 2017

Llega el mes de Junio y diferentes series y películas llegan a la plataforma de vídeo mediante streaming por excelencia; es por eso, que el día de hoy te presentamos cuales son los estrenos que…

close

Living Lights of the Ocean, fotografías de un mundo subacuático surrealista

Living Lights of the Ocean es obra de fotografía y diseño digital que nos presenta un maravilloso paisaje neón de un mundo subacuático completemente surrealista. Un podría jurar que se trata de modelados digitales a simple…

notifications Recién publicamos
close