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-endFront-end 3

1. Dust & Magnet 1. Nutrition Graph 5

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 + Interactive and engaging -Lack of understanding -Vague data 11

12

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 21 Internet Explorer FirefoxChromeSafariOpera 25.8%42.2%25.0%4.0%2.5% IE9IE8IE7IE6 1.1%16.3%5.4%3.0%

1. Rapid Development 1. Nutritional Data 2. Data to the Front End 3. User Authentication 23

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 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 ◦ 26

27

 Opinionated Framework  Convention Over Configuration  Model-View-Controller 28

29

30

platform.fatsecret.com/api 31

32  Comprehensive  Branded Food  Limited API Calls  Store them on our Database for a day  Looking for other data sources

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" Fat, Cooked, Broiled)", "rating":"5", "position_x": , … "nutritions":[ { "serving_size":"3.0", "serving_unit":"oz ( 1 serving )", … }, { "serving_size":"1.0", … 37

38

39

40  Complexity  Security

41 rubygems.org

◦ User Authentication gem ‘devise’, ‘1.1.3’ 42 class User < ActiveRecord::Base validates :first_name,:presence => true validates :last_name, :presence => true … devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable, :confirmable attr_accessible : , :password, :password_confirmation, :first_name, :last_name end class User < ActiveRecord::Base validates :first_name,:presence => true validates :last_name, :presence => true … devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable, :confirmable attr_accessible : , :password, :password_confirmation, :first_name, :last_name end Logged in as Logged in as

 Use a Framework  Optimize API Calls  JSON for front end data  Don’t reinvent the wheel  ECN supports Ruby on Rails Hosting 43

44 Session surveys