TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily...
-
Upload
rosa-mason -
Category
Documents
-
view
230 -
download
0
Transcript of TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily...
![Page 1: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/1.jpg)
Food For The Heart,an Interactive Web Application
TM Lee and F. Vina Zerlina
![Page 2: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/2.jpg)
2
Prevent coronary heart disease
Choose the “right” food
Plan daily meals
Dust and Magnet
Target recommended nutrition intake
![Page 3: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/3.jpg)
3
How did we develop and what did we learn?
Javascript
CSS
Back-end Front-end
![Page 4: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/4.jpg)
Front-End
![Page 5: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/5.jpg)
5
1. Dust & Magnet
2. Nutrition Graph
Major Components
![Page 6: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/6.jpg)
6
Dust & Magnet Visualization Interface1
![Page 7: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/7.jpg)
7
How do you present a large set of data to the users?
![Page 8: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/8.jpg)
8
Data Visualization
![Page 9: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/9.jpg)
9
Decision-making tool (Java-based) Visualizing multivariate data with Dust & Magnet
metaphor
Dust and Magnet
![Page 10: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/10.jpg)
10
JavaScript and CSS Interaction◦ Pop-up window using jQuery UI◦ Automatic highlights using jScrollTo
Dust and Magnet
![Page 11: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/11.jpg)
11
Data Visualization
+ Less burdening to the users
+ Interactive and engaging
- Lack of understanding
- Vague data
![Page 12: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/12.jpg)
12
Data Visualization
![Page 13: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/13.jpg)
13
Graphing on the Web2
![Page 14: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/14.jpg)
14
How to make the application more accessible? Flash offers a rich & interactive interface However, it is not widely accessible
Accessibility
![Page 15: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/15.jpg)
15
JavaScript-based graph
Many JavaScript graphing API available online◦ PlotKit, Flot, Visifire, FusionCharts, Highcharts, etc…
Which one to use?
Graphing on the Web
![Page 16: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/16.jpg)
16
Flot
Attractive , interactive
Working nice in *most* browsers
Failed to interact in IE 7
Always check cross-browsers compatibility!
Graphing on the Web
![Page 17: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/17.jpg)
17
Highcharts Working in all browsers Easy to interact◦ JavaScript object to define chart options
Variety of charts
Graphing on the Web
![Page 18: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/18.jpg)
18
Why is Highcharts cross-browsers compatible?
◦ Use of SVG
◦ In IE < 9, use VML
Graphing on the Web
![Page 19: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/19.jpg)
19
SVG (Scalable Vector Graphics) 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
![Page 20: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/20.jpg)
20
Internet Explorer (IE) VML is used in IE 6, 7, 8 Alternatives? Use plugins.◦ Raphael for SVG
Good news! IE9 supports SVG
VML (Vector Markup Language)
![Page 21: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/21.jpg)
21
Internet Explorer usage
VML (Vector Markup Language)
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%
![Page 22: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/22.jpg)
Back-End
![Page 23: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/23.jpg)
23
1. Rapid Development
2. Nutritional Data
3. Data to the Front End
4. User Authentication
What we need…
![Page 24: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/24.jpg)
Rapid Development1
![Page 25: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/25.jpg)
25
Yukihiro Matsumoto in 1993 Dynamic Scripting Language
Ruby Language
puts “Boilerweb 2011!”>> Boilerweb 2011!
desserts = [“cupcake”, “froyo”, “ice-cream”]for dessert in desserts
puts dessertend>> cupcake>> froyo>> ice-cream
![Page 26: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/26.jpg)
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
Ruby on Rails
![Page 27: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/27.jpg)
27
Who is using it?
![Page 28: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/28.jpg)
28
Opinionated Framework
Convention Over Configuration
Model-View-Controller
Rapid Development
![Page 29: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/29.jpg)
29
Nutritional Data2
![Page 30: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/30.jpg)
30
Nutritional Data
![Page 31: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/31.jpg)
31
platform.fatsecret.com/api
![Page 32: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/32.jpg)
32
Nutritional Data Comprehensive
Branded Food
Limited API Calls
Store them on our Database for a day
Looking for other data sources
![Page 33: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/33.jpg)
33
Data to the Front End3
![Page 34: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/34.jpg)
Interactive web application
Javascript Front End
Reduces database query
Data To/From Both Ends
![Page 35: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/35.jpg)
35
Data to the Front End
![Page 36: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/36.jpg)
36
Interactive web application
Javascript Front End
Reduces database query
Data Interchange File
Data To/From Both Ends
![Page 37: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/37.jpg)
{ "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", …
JSON (Javascript Object Notation)
![Page 38: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/38.jpg)
38
User Authentication4
![Page 39: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/39.jpg)
39
User Authentication
![Page 40: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/40.jpg)
40
User Authentication Complexity
Security
![Page 41: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/41.jpg)
41
User Authentication
rubygems.org
![Page 42: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/42.jpg)
42
◦User Authenticationgem ‘devise’, ‘1.1.3’https://github.com/plataformatec/devise
Gems
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
<div id="login_logout_register"> Logged in as <%= current_user.email %>
<%- end %>
![Page 43: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/43.jpg)
Use a Framework
Optimize API Calls
JSON for front end data
Don’t reinvent the wheel
ECN supports Ruby on Rails Hosting
Lessons Learned
![Page 44: TM Lee and F. Vina Zerlina. Prevent coronary heart disease Choose the “right” food Plan daily meals Dust and Magnet Target recommended nutrition.](https://reader036.fdocuments.in/reader036/viewer/2022062408/56649e9f5503460f94ba2358/html5/thumbnails/44.jpg)
44
Thank You!
Session surveyshttp://www.itap.purdue.edu/boilerweb/survey