1. TM Lee and F. Vina Zerlina

2.  Prevent coronary heart disease  Choose the “right” food  Plan daily meals  Dust and Magnet  Target recommended nutrition intake 2

3. Back-endFront-end 3

5. 1. Dust & Magnet 1. Nutrition Graph 5

6. 6

7. 7

8. 8

9.  Decision-making tool (Java-based)  Visualizing multivariate data with Dust & Magnet metaphor 9

10.  JavaScript and CSS  Interaction ◦ Pop-up window using jQuery UI ◦ Automatic highlights using jScrollTo 10

11. + Less burdening to the users + Interactive and engaging -Lack of understanding -Vague data 11

12. 12

13. 13

14.  How to make the application more accessible?  Flash offers a rich & interactive interface  However, it is not widely accessible 14

15.  JavaScript-based graph  Many JavaScript graphing API available online ◦ PlotKit, Flot, Visifire, FusionCharts, Highcharts, etc…  Which one to use? 15

16.  Flot  Attractive, interactive  Working nice in *most* browsers  Failed to interact in IE 7  Always check cross-browsers compatibility! 16

17.  Highcharts  Working in all browsers  Easy to interact ◦ JavaScript object to define chart options  Variety of charts 17

18.  Why is Highcharts cross-browsers compatible? ◦ Use of SVG ◦ In IE < 9, use VML 18

19.  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

20.  Internet Explorer (IE)  VML is used in IE 6, 7, 8  Alternatives? Use plugins. ◦ Raphael for SVG  Good news! IE9 supports SVG 20

21.  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%

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

24. 24

25.  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

26.  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. 27

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

29. 29

30. 30

31. platform.fatsecret.com/api 31

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

33. 33

34.  Interactive web application  Javascript Front End  Reduces database query 34

35. 35

36.  Interactive web application  Javascript Front End  Reduces database query  Data Interchange File 36

37. { "food":[ { "id":"99", "title":"Beef Bottom Sirloin Butt (Tri-Tip Steak, Lean Only, Trimmed to 0" Fat, Cooked, Broiled)", "rating":"5", "position_x":-0.05058333333333334, … "nutritions":[ { "serving_size":"3.0", "serving_unit":"oz ( 1 serving )", … }, { "serving_size":"1.0", … 37

38. 38

39. 39

40. 40  Complexity  Security

41. 41 rubygems.org

42. ◦ User Authentication gem ‘devise’, ‘1.1.3’ https://github.com/plataformatec/devise 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 :email, :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 :email, :password, :password_confirmation, :first_name, :last_name end Logged in as Logged in as

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

44. 44 Session surveys http://www.itap.purdue.edu/boilerweb/survey