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

Lista de estrenos en Netflix para Mayo 2017

Netflix continua incrementado su catalogo de películas y series cada mes; siendo el turno del mes de Mayo del 2017 donde llegarán nuevas temporadas de series como House of Cards y Unbreakable Kimmy Schmidt; así como…

close

play_circle_outline Mira el nuevo y emocionante trailer final de Cars 3

El día de ayer se dio a conocer el trailer final de la nueva entrega de la película de Disney y Pixar Cars 3; esta nueva entrega de la saga nos relata la ultima carrera…

close

Ilustraciones tipográficas inspiradas en el reino animal

El diseñador británico conocido como Marcus Reed ha creado una genial colección de ilustraciones tipográficas inspiradas en el reino animal; estas ilustraciones nos muestran a diversos animales desde el Cocodrilo hasta la Cebra con sus…

close

Reglas que debes conocer para el uso del texto en el diseño gráfico

El día de hoy quiero compartir con ustedes una infografía que contiene algunas reglas para el uso de texto; estas son reglas básicas y que debemos tener presente al usar texto en nuestra practica del…

close

Transmitir vídeos de tu navegador a tú TV con Chromecast pronto será más fácil

Hace 5 años Google lanzo su Chromecast un aparato revoluciono el streaming de vídeos del navegador o móvil a la televisión sin grandes complicaciones, desde eso el dispositivo ha ido mejorando poco a poco agregando…

close

Dragon Frappuccino la alternativa para los que no probaron el Frappucino Unicornio

En las ultimas semanas se hizo la locura en redes sociales y establecimientos Starbucks con motivo de la venta del Frappuccion unicornio; el cual, en muchas tiendas se agoto antes de cumplir las 24 horas…

notifications Recién publicamos
close