Slides - ITaP

gayheadtibburInternet and Web Development

Feb 5, 2013 (4 years and 6 months ago)

279 views

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

Javascript

CSS

Back
-
end

Front
-
end

3

1.
Dust & Magnet






1.
Nutrition Graph


5

6

1

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

2


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

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%

1.
Rapid Development


1.
Nutritional Data


2.
Data to the Front End


3.
User Authentication



23

24

1


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

29

2

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

3


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

38

4

39

40


Complexity



Security









41

rubygems.org


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

<div id="
login_logout_register
">



Logged in as <%=
current_user.email

%>





<%
-

end %>


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

http://
www.itap.purdue.edu/boilerweb/survey