TM Lee and F. Vina Zerlina

Prevent coronary heart disease

Choose the “right” food

Plan daily meals

Dust and Magnet

Target recommended nutrition intake
2
Back-end
Front-end
Javascript
CSS
3
1.
Dust & Magnet
1.
Nutrition Graph
5
1
6
7
8


Decision-making tool (Java-based)
Visualizing multivariate data with Dust & Magnet
metaphor
9


JavaScript and CSS
Interaction
◦ Pop-up window using jQuery UI
◦ Automatic highlights using jScrollTo
10
+ Less burdening to the users
- Lack of understanding
+ Interactive and engaging
- Vague data
11
12
2
13



How to make the application more accessible?
Flash offers a rich & interactive interface
However, it is not widely accessible
14

JavaScript-based graph

Many JavaScript graphing API available online
◦ PlotKit, Flot, Visifire, FusionCharts, Highcharts, etc…

Which one to use?
15

Flot

Attractive , interactive

Working nice in *most* browsers

Failed to interact in IE 7

Always check cross-browsers compatibility!
16



Highcharts
Working in all browsers
Easy to interact
◦ JavaScript object to define chart options

Variety of charts
17

Why is Highcharts cross-browsers compatible?
◦ Use of SVG
◦ In IE < 9, use VML
18



Markup language to describe vector graphics
Developed since 1999 by W3C organizations
Supported by most of major browsers
◦ Firefox, Chrome, Opera, Safari,…
◦ .. but not Internet Explorer

Suitable for:
◦ Resolution-independent Web UI
◦ Vector image editing
◦ Interactive (& animated) UI
 Full control of each elements using SVG DOM API in JavaScript
19



Internet Explorer (IE)
VML is used in IE 6, 7, 8
Alternatives? Use plugins.
◦ Raphael for SVG

Good news! IE9 supports SVG
20

Internet Explorer usage
Internet
Explorer
Firefox
Chrome
Safari
Opera
25.8%
42.2%
25.0%
4.0%
2.5%
IE9
IE8
IE7
IE6
1.1%
16.3%
5.4%
3.0%
21
1.
Rapid Development
1.
Nutritional Data
2.
Data to the Front End
3.
User Authentication
23
1
24


Yukihiro Matsumoto in 1993
Dynamic Scripting Language
puts “Boilerweb 2011!”
>> Boilerweb 2011!
desserts = [“cupcake”, “froyo”, “ice-cream”]
for dessert in desserts
puts dessert
end
>> cupcake
>> froyo
>> ice-cream
25




Web Application Framework based on the
Ruby Language
David Heinemeier Hansson in July 2004
Aimed to increase developmental speed
Open Source
◦ https://github.com/rails/rails
26
27

Opinionated Framework

Convention Over Configuration

Model-View-Controller
28
2
29
30
platform.fatsecret.com/api
31

Comprehensive

Branded Food

Limited API Calls

Store them on our Database for a day

Looking for other data sources
32
3
33

Interactive web application

Javascript Front End

Reduces database query
34
35

Interactive web application

Javascript Front End

Reduces database query

Data Interchange File
36
{
"food":[
{
"id":"99",
"title":"Beef Bottom Sirloin Butt (Tri-Tip Steak, Lean Only, Trimmed to 0&quot; Fat, Cooked,
Broiled)",
"rating":"5",
"position_x":-0.05058333333333334,
…
"nutritions":[
{
"serving_size":"3.0",
"serving_unit":"oz ( 1 serving )",
…
}
,
{
"serving_size":"1.0",
…
37
4
38
39

Complexity

Security
40
rubygems.org
41
◦ User Authentication
gem ‘devise’, ‘1.1.3’
https://github.com/plataformatec/devise
class User < ActiveRecord::Base
validates :first_name ,:presence => true
validates
:last_name, :presence => true
<div id="login_logout_register">
…
Logged in as <%= current_user.email %>
devise
:database_authenticatable,
:registerable,
<%- end
%>
:recoverable, :rememberable, :trackable, :validatable, :confirmable
attr_accessible :email, :password, :password_confirmation , :first_name, :last_name
end
42

Use a Framework

Optimize API Calls

JSON for front end data

Don’t reinvent the wheel

ECN supports Ruby on Rails Hosting
43
Session surveys
http://www.itap.purdue.edu/boilerweb/survey
44