I'm a web-loving, webapp maker kinda guy. Here are a few things I have created for my employers, my freelancing projects and my own personal projects

Posts tagged ‘Apple’

Responsive Web Design for a dashboard

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

VIEW DEMO (source code – Responsive web design with charts in Sencha EXTJS; source code – A plot chart using HighChart javascript library)

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

Advertisement

Category:

HTML5, Javascript, jQuery, mobile/smartphone app, Responsive Web Design, Sencha ExtJS

Tagged with:

UI/UX Design of a Content Management System

GBIHelpScreen

In this month-long project, it was my task to come up with a new design to an existing website. The goal was the make the User Interface clear for users and the User Experience easier to use.

I conducted interviews of End Users to gather their pain points and requirements. The information from the interviews helped me to design a new UI for the website which I displayed in a comprehensive wireframe. I’m proud to say, my UI/UX designs were very well received by the end users.

Category:

Graphics

Tagged with:

Trees! Trees! Trees! But not the kind of forest you’re thinking of

.

VIEW DEMO (source code – display of tree nodes and child node expansion)

Normal people think of trees as those green living things with branches and leaves. Computer Programmers think of trees as something completely different. (although computer programmers should be considered normal people too).

I made this mult-tree webpage for using jQuery and the plugin treeTable. Using JSON data from a webservice, I generate a table using the old <table><tr><td> tags with their corresponding parent ids. Then I plug in the treeTable — and POOOOOF — the tree appears. It’s that easy.

Category:

HTML, Javascript, jQuery

Tagged with:

Web-based Compare/Copy tool


(actual data has been removed and replaced with fake data)

VIEW DEMO (source code – duplicating form field values and DOM contents)
This is one of the many projects I worked on at Apple. I made this web app for Apple using Javascript and jQuery.

If you’re familiar with programming and doing a code-difference on the changes you’ve made to your code, you’ll probably notice some similarities to this web-based tool. This tool basically shows the difference between two sets of data and allows you to copy one set of data to the other. There’s more to it, but let’s not bore you too much.

And oh! If you resize your browser, the web app will resize itself to use the most space as possible… because I just hate white empty space.

Category:

HTML, Javascript, jQuery

Tagged with: