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

Ya puedes crear álbumes de fotos en Instagram

Instagram continua evolucionando y agregando cada vez mas mejores, aunque seamos sinceros las últimas no han sido precisamente innovaciones, mas bien han sido copias de funciones que ya tenía Snapchat, pero bueno la última actualización…

close

play_circle_outline Genial timelapse que muestra la evolución del NY Times y la fotografía periodística

El NY Times es uno de los iconos periodísticos en el mundo actual; sin embargo muchas veces no nos ponemos a pensar como es que llego a ser lo que es hoy en día. Es…

close

Diseños de folletos hechos de cartón; un gran ejemplo de diseño sustentable

El diseño sustentable es una de las tendencias con más fuerzas en este 2017; esto debido a la creciente tendencia de los diseñadores de ser amigables con el ambiente. Es por eso que el diseñador irlandés Ryan…

close

Dilapidation, una genial serie fotografica sobre lugares olvidados

James Kerwin es un fotógrafo con sede en Norwich quien ha comenzó un proyecto fotográfico centrado en la documentación de lugares abandonados. Este fotógrafo ha recorrido diversas partes del mundo localizando edificios y lugares dejados…

close

Propeller, un framework para crear paginas web que combina Bootstrap + Material Design

Propoller es nuevo framework para diseño de paginas web que integra dos de los frameworks mas populares, Bootstrap y Google’s Material Design, entonces podríamos decir que Propeller es un mashup de frameworks que combina lo…

close

Tips de fotografía según el tipo de lente que utilices

Les comparto una serie de infografías realizadas por Canon en la que nos ofrecen algunos tips de fotografía según el tipo de lentes que utilicemos, cada infografía abarca un tipo de lentes distinto desde los…

notifications Recién publicamos
close