Here’s my talk on my Open Source project Droptiles, which replicates the Windows 8 Start UI on the web using HTML 4, JS, CSS 2. I have given an walkthrough on how to use Twitter Bootstrap to create modern looking UI. Then how to use KnockoutJS to build a web applicatoin following the Model-View-ViewModel pattern. And some handy use of UnderscoreJS. After the introduction of these frameworks, you will see a quick demo to build a sample dynamic modern UI page that mimics the Windows 8 Start screen look and feel – implementing Bootstrap, KnockoutJS, jQuery together. Then I have shown how to build a new Tile in Droptiles.
Droptiles is an
See it live!, go to Droptiles.com
- Metro style user interface. CSS framework to build metro style websites, inspired by metroui.org.ua.
- Drag & Drop tiles to personalize the experience.
- Client side object model and data binding for easy MVVM implementation.
- Server side platform neutral implementation. Can be ported to PHP, JSP easily.
- Live tiles. Tiles are mini-apps, loading data from variety of sources.
- Enterprise Dashboard aggregating data from various systems and offering a launch pad for intranet/internet applications.
- Web 2.0 Portal offering portlets in the form of tiles. Aggregating data from various services and as a launch pad for different services.
- Touch enabled Kiosk front-end.
- Content aggregator for News and Research purpose.
Droptiles is Open Source. It is free for personal use as long as you keep the copyright notices intact. In order to buy license, go to theDroptiles production site and there’s a tile on the right side to place the order through Paypal.
- jQuery for all client side effects.
- KnockoutJS for client side Object Model and data binding.
- Bootstrap for cross-browser CSS framework and jQuery plugins.
AppStore offers new applications
Tiles can be dynamic pages delivered from the server. Here is a tile that captures the html output of an ASPX page. Tiles can be intercative as well. You can embed a form inside a tile.
External applications can run inside Droptiles offering a seamless integration experience.
You can get the code from the GitHub site: http://oazabir.github.com/Droptiles/