I'm a web-lovin, webapp maker kinda guy

Posts tagged ‘ExtJS’

Responsive Web Design for a dashboard

Screencast shows the same web-dashboard displayed on three different devices – MacBook, iPad, and iPhone See in Action

With the increasing popularity of iPads and iPhones, I was asked me to create a web-based dashboard to provide an optimal viewing experience with all their devices – iPads, iPhones, and Macbooks using just a single-code base. I was able to achieve these requirements using responsive web design techniques with HTML5, javascript and CSS3.

The dashboard contains several distinct widgets:
1.) Multiple carousels (swiping of data) responds to both mouse and touch gestures to swipe the card to view additional sets of data.
2.) A slider to select the date and time range. The slider transforms into the standard iPhone time picker when the web-dashboard is viewed on an iPhone.
3.) Sophisticated charts embedded inside of other charts.
4.) Grids to display data
5.) Persistent Web Design techniques to retain user’s viewing settings

In addition to javascript and CSS3. I used the following technologies and plugins:

  • Bryntum Scheduler and Gantt Charts
  • Sencha EXTJS 4.0
  • jQuery
  • jQuery.ContentCarousel plugin
  • Developr theming
  • glDatePicker
  • jQRangeSlider
  • jQuery.blockUI plugin
  • mobiScroll

View the Web Dashboard

Advertisements