1. Web 2.0 Application
Development
make your webapps more social
Amit K Mathur
akmathur@gmail.com
http://www.magnionlabs.com
Web 2.0 Application Development – p.

2. Trainer
Independent consultant and freelance developer
http://www.magnionlabs.com/blog Follow me on Twitter
@akmags
Reachable also on:
Skype (akmags) and
Cell (+91 99863 95538).
Web 2.0 Application Development – p.

3. You
Have you done web
development before?
Which platform?
What do you expect to
gain out of this train-
ing? Build an app?
Web 2.0 Application Development – p.

4. Goals of this training
Introduction to the medley of technologies in
web dev
How to take advantage of some of emerging
web 2.0 techniques
Web 2.0 Application Development – p.

5. Rules
Flames, abuse, questions? Welcome any time
Use the “make sure you cover” sheet
Hands on work - no rush to finish
4 days
Web 2.0 Application Development – p.

6. Day 1
Web 2.0 - definition
Review of Webapp architecture
Set up system for hands on exercises
Review of Ruby
RoR Introduction
Web 2.0 Application Development – p.

7. Day 2
Developing Quiz app with Rails
Rails theory
RESTful architecture
Web 2.0 Application Development – p.

8. Day 3
AJAX with Rails
Enhance Quiz app
Javascript, Jquery
Web 2.0 Application Development – p.

9. Day 4
Feeds, Microformats
Mashup - develop an example app
Tag cloud, Reverse AJAX
Flash
The End
Web 2.0 Application Development – p.

10. Let’s start..
6560
Web 2.0 Application Development – p. 1

11. Web is young
6560
Approximate number of days since Tim Berners-Lee’s first
public webpage (Aug 6, 1991)
Great achivements: Google, Wikipedia, Amazon,
ebay, online banking, etc.
Web 2.0 Application Development – p. 1

12. Web - beginning
Web pages as “Shared documents” - send a
request to server, get a document back (HTTP
headed towards "Sematic Web" - a web of dat
Web 2.0 Application Development – p. 1

13. Web - the new goal
Semantic Web - web of data
A page is atomic to computers but not to a
human
structures so that machines can recognize the
data on the page
Web 2.0 Application Development – p. 1

14. Web 2.0
A small step towards semantic web
“sharing” and “data” are now more importan
site’s importance increases as user
participation increases
Web 2.0 Application Development – p. 1

15. Web 2.0
The Web 2.0 dilemma
Web 2.0 Application Development – p. 1

16. Web 2.0
Social: database grows in importance as user
participation increases
Site is just a platform
• delicious.com, flickr.com, twitter, digg,
Google maps, uservoice.com, picnik.com
• See it in action:
http://del.icio.us/popular
http://delicious.com/tag/programming+development
Web 2.0 Application Development – p. 1

17. Web 2.0
Architectural: scaling, RESTful, microformats
Security is paramount since data is important
Frivolous and incidental: drop shadows, beta
tag (eg. ajax-loader.com), vowel-less names,
AJAX, tagging
Web 2.0 Application Development – p. 1

18. Web 2.0
Reference: James Surowiecki, The Wisdom of
Crowds: Why the Many Are Smarter than the Few
and How Collective Wisdom Shapes Business,
Economies, Societies, and Nations. Published by:
Random House, 2004.
Web 2.0 Application Development – p. 1

19. Webapp architecture
Server Client
www.example.com
HTML doc
CSS
Javascript
Response
/path/to/action construct
a page
if(...)
... ...
else
DB ... ...
end
HTTP Request
http://www.example.com/path/to/action
Application Server
Web 2.0 Application Development – p. 1

20. Web development
Browser Framework
When user types an address, browser sends a
HTTP GET (or POST) request to server
Server send back a response
• 1xx (Informational)
• 2xx (Success)
• 3xx (Redirect)
• 4xx (Client Error)
• 5xx (Server Error) Web 2.0 Application Development – p. 2

21. Web development
Response is text
• formatted as HTML
• CSS file specifies layout
• Javascript, which is executed as code by th
browser
Theory over!
Web 2.0 Application Development – p. 2

22. Hands on work
Set up your system
Linux Desktop
install Ruby 1.8.6 (or
1.8.7)
install Rubygems
sudo gem install rails
Take a break!
Web 2.0 Application Development – p. 2

23. Dekho
http://yellowpages.com
http://www.hulu.com
http://revolutionhealth.com
http://www.twitter.com
http://basecamphq.com
http://43things.com/
http://penny-arcade.com/
These are all powered by Ruby on Rails
Web 2.0 Application Development – p. 2

24. Web development
It can get overwhelming.
graphic design
HTML/CSS
Javascript/AJAX
RIAA/Flash
HTTP
Server side development
Database design
Analytics & operation
Rails makes it easy. Really.
Web 2.0 Application Development – p. 2

25. Ruby on Rails
Ruby is a (very powerful) general purpose
programming language
Ruby on Rails is a framework to write web
applications in Ruby
Web 2.0 Application Development – p. 2

26. Ruby on Rails
Ruby on Rails is
sometimes shortened
to just Rails
Ruby on Rails is more
of a DSL for web-apps
full stack framework
Web 2.0 Application Development – p. 2

27. Database backed web application
Web application which provides interface to an
underlying database
Examples are plentiful
• Gmail, Airline ticketing system like
cleartrip.com , flickr,
• and almost any webapp these days...
Non examples are: chat systems, mortgage
calculators, etc.
Web 2.0 Application Development – p. 2

28. Romancing with Ruby
Say, Hi!
History: Originated in
Japan
created by Yukihiro
Matsumoto (aka Matz)
Web 2.0 Application Development – p. 2

29. Romancing with Ruby
Personality
An easy to learn OO scripting language
Influenced by Perl, Smalltalk, CLU, OCaml,
Dylan and others
VHLL, Simpler, better OO
Superb Regex support
Interpreted (Code, test, tinker cycle is shorter)
even declarations are executed,
Web 2.0 Application Development – p. 2

30. Romancing with Ruby
Personality
Agile language - changes are less painful
GC
Programming should be enjoyable -
Ruby is optimized for humans - Matz.
Web 2.0 Application Development – p. 3

31. Romancing with Ruby
Is it Strongly typed or weakly typed
it depends. Ruby supports duck typing
Web 2.0 Application Development – p. 3

32. Romancing with Ruby
Basic OO concepts
fundamental unit is an object: container of da
and methods to access this data
attributes and methods
Object is an instance of a Class; Class is a
blueprint for creating Objects; complex type
than Integer or String
Web 2.0 Application Development – p. 3

33. Romancing with Ruby
Basic OO concepts
Class can also have class attributes - shared
amongst all the objects
Inheritance: is-a relationship; means of
extending functionality - achieves code reuse
Polymorphism
Abstract Class (can only be inherited from),
Concrete Class
Web 2.0 Application Development – p. 3

34. Romancing with Ruby
Syntax
no semicolon needed
line beginning with # is a comment
Web 2.0 Application Development – p. 3

35. Romancing with Ruby
Syntax
data types:
• Integers, String (can be double quoted or
singly quoted), Array, Hash
• Symbols are names of variables. e.g.
:question, :user
• Read them as the thing called question
• Symbols are constants - hence, can be used
as enums
Web 2.0 Application Development – p. 3

36. Romancing with Ruby
Everything, including a literal, is an object, so this
works:
-15.abs
"mera bharat mahan".length
"Venkat".index("n")
"We are like this only!".downcase.spl
Variables don’t have any type, only objects
have type
Web 2.0 Application Development – p. 3

37. Romancing with Ruby
Variable naming convention is important - denote
scope
All constants & Class names begin with a
capital letter (e.g. PI, Vehicle)
All local variables begin with a lower case (e.g
sum_total, nn)
Web 2.0 Application Development – p. 3

38. Romancing with Ruby
Iteration of enumerable objects
# An array with some elements
arr = [1, 2, 3, 5,
:lemme_see, 13,
"is it Fibonacci or what"]
arr.each do |e|
puts e
end
Web 2.0 Application Development – p. 3

39. Romancing with Ruby
# output
1
2
3
5
lemme_see
13
is it Fibonacci or what
Web 2.0 Application Development – p. 3

40. Romancing with Ruby
Mutation is also easy
arr.map { |e| e.to_s }
["1", "2", "3", "5", "lemme_see",
"13", "is it Fibonacci or what"]
Web 2.0 Application Development – p. 4

41. Romancing with Ruby
capitals = { "Karnataka" => "Bangalor
"Kerala" => "Thiruvananthapuram", "
capitals.keys # ["Karnataka", "A.P.",
"T.N.", "Kerala"]
capitals.values # ["Bangalore", "Hyde
"chennai", "Thiruvananthapuram"]
capitals["T.N."] # Chennai
capitals["Kerala"] = "Trivandrum"
Web 2.0 Application Development – p. 4

42. Romancing with Ruby
Loops and branches
if temp > 30
puts "It’s very hot"
else
puts "I can bear it"
end
puts "Pass me a glass of water" if te
Web 2.0 Application Development – p. 4

43. Romancing with Ruby
case "Web application development"
when "some value"
puts "Branch 1"
when "different value"
puts "Branch 2"
when /char/
puts "Branch 3"
else
puts "Branch 4"
end
Web 2.0 Application Development – p. 4

44. Romancing with Ruby
Exercise: write a Ruby program
Given a string of tags - each tag is a word,
separated by comma - find whether a given ta
exists in the tag list
Find whether all of a list of tags (given as
string), exists in a tag list
Web 2.0 Application Development – p. 4

45. Romancing with Ruby
Exercise: hints
tags = "social,friend,comic,fun"
tags.split(",").find { |t|
t == ’social’
}
Web 2.0 Application Development – p. 4

46. Romancing with Ruby
OO in Ruby
Declare a class
public, private and protected visbility
No multiple inheritance
Package namespace
Web 2.0 Application Development – p. 4

47. Romancing with Ruby
class Rectangle < GeometricShape
def set_length(l)
@length = l
end
def set_width(w)
@width = w
end
def area
@length * @width
end
protected
def calculate_sides
end
end
Web 2.0 Application Development – p. 4

48. Romancing with Ruby
OO contd.
Duck Typing: Behaviour is more important
than inheritance
Classes are Open - Methods can be added any
time to any class even to built-in, library ones
Web 2.0 Application Development – p. 4

49. Romancing with Ruby
Exception Handling
Ways to throw an exception
raise "this is an Exception"
raise ArgumentError.new(
"Illegal value for #{i}th argument"
Web 2.0 Application Development – p. 4

50. Romancing with Ruby
Handling one
begin
# do something
rescue ArgumentError => e
# do the firefighting
retry # start the begin block again
ensure
# clean up - executed always
end
Web 2.0 Application Development – p. 5

51. Romancing with Ruby
Modules
defines a namespace
mixins - instance methods of modules become
instance methods of the class
Web 2.0 Application Development – p. 5

52. Romancing with Ruby
Tools
Rdoc for online documentation
irb for testing your scripts quickly
Web 2.0 Application Development – p. 5

53. Romancing with Ruby
Other miscellany:
parenthesis are optional with method calls
foo(a, b, c)
foo a, b, c
passing hash to a method if its the only parameter
does not require braces
foo(a => 1, b => 2)
# is really foo({a => 1, b => 2})
Web 2.0 Application Development – p. 5

54. Romancing with Ruby
Other nitty gritty
In nested if ladder, elsif is used instead of else
method names can end in ! (object itself is
modified) or ? (method returns a boolean
value)
there are no ++ or - - operators
everything is true except false and nil. 0, "", []
are all true
Web 2.0 Application Development – p. 5

55. Romancing with Ruby
inside a string, anything within # is an
expression
def do_something(param1, param2)
result = hello()
puts "The result of compuation is #{result.capitalize}"
return result if xxx
end
Web 2.0 Application Development – p. 5

56. Romancing with Ruby
More nitty gritty
variables don’t have classes, only values have
classes
there are both &&, || and ’and’, ’or’ operator
and, or have a lower precedence
variable and method names may not be alway
distinguishable by eye
Web 2.0 Application Development – p. 5

57. Romancing with Ruby
Ruby allows aliasing - giving a method other
names
vowels = [’a’, ’e’, ’i’, ’o’, ’u’]
# following are the same method
vowels.size
vowels.length
Web 2.0 Application Development – p. 5

58. Romancing with Ruby
yet more nitty gritty
powerful range operator (.. and ...)
multiple assignment is allowed
a,b = b,a # easy peasy swap
regex are very powerful (if you know Java or
Perl ones, you are good)
Web 2.0 Application Development – p. 5

59. Romancing with Ruby
OK, that’s it!
Web 2.0 Application Development – p. 5

60. Day 2
Developing Quiz app with Rails
Rails theory
RESTful architecture
Web 2.0 Application Development – p. 6

61. An itch to scratch
Problem statement:
A database of multiple choice questions and
answers. Every visitor can take a quiz, which is a
random set of 10 questions. Then they see how
many they got correct.
Bells and whistles: For registered users, let them
see the history of all quizzes played. Display a
global list of top scrorers, etc.
Web 2.0 Application Development – p. 6

62. Page flow diagram
Admin interface (enter questions)
External interface (home page, play a round,
results page)
Web 2.0 Application Development – p. 6

63. DB table
questions table
qtext:string
option1:string to
option4:string
answer:integer
Not fully normalized, but let’s go with it.
Web 2.0 Application Development – p. 6

64. Rolling on Rails
rails quiz –database=mysql
cd quiz
ruby script/generate scaffold question
qtext:string option1:string option2:string
option3:string option4:string answer:integer
Web 2.0 Application Development – p. 6

65. Rolling on Rails
Framework for the fatafat
generation
Framework = lots of
needed code is already in
place. start by filling in the
business logic
Web 2.0 Application Development – p. 6

66. Rolling on Rails
app contains all application code and test
should have all the tests for this code
any static files go into public
note config, db, log and script directories
Rakefile has many useful tasks defined (rake
-T)
default webserver is WEBrick. In production,
should be replaced by something more
powerful like mongrel Web 2.0 Application Development – p. 6

67. Rolling on Rails
rake db:create
rake db:migrate
many DBs are sup-
ported: MySQL, DB2,
Oracle, Postgres,
SQLServer, SQLite,
etc.
Web 2.0 Application Development – p. 6

68. Rolling on Rails
ruby script/server
http://localhost:3000/questions
create, edit, delete
questions
Web 2.0 Application Development – p. 6

69. Rolling on Rails
What’s this scaffolding
thing...
a bare but functional
interface with zero
programming
a good starting point
for a piece by piece re-
placement to build the
real app
Web 2.0 Application Development – p. 6

70. Rolling on Rails
built around CRUD features of a model
controller provides CRUD methods
model database schema provided by migratio
script
Database table was looked up from
config/database.yml
Web 2.0 Application Development – p. 7

71. Rolling on Rails
MVC
Model = state of the application, often saved
into DB with all business rules
Controller = receive events from outside worl
interact with model and present suitable view
View = suitable presentation of model for use
interaction
Web 2.0 Application Development – p. 7

72. Rolling on Rails
Exercise: Add authorization - only admin should
be able to view these pages
Look at restful_authentication plugin
Still stuck? Have you tried http://www.stackoverflow.com
Web 2.0 Application Development – p. 7

73. Rolling on Rails
A DSL for creating
Database backed ap-
plication. Where actions
and forms can be mapped
directly to database
Web 2.0 Application Development – p. 7

74. Rolling on Rails
ActiveRecord
ORM - map database tables to objects
Maps DB table to class, rows to objects,
columns to attributes with accessors
(getters/setters) defined
Web 2.0 Application Development – p. 7

75. Rolling on Rails
ActiveRecord
near zero configuration - if you follow the
convention
Powerful operations:
order = Order.find(1)
orders = Order.find(:all, :conditions => ["name = ?", "Dave"
orders.each do |o|
o.price *= 0.15
o.save
end
Web 2.0 Application Development – p. 7

76. Rolling on Rails
ActiveRecord
empty description should not be allowed
class Question < ActiveRecord::Bas
validates_presence_of :qtext
end
Did you note that after making any changes we never have to restart out application -
changes are picked up automatically
Web 2.0 Application Development – p. 7

77. Rolling on Rails
Error handling in forms
Notice that forms highlight the fields in error
When a validation fails, ActiveRecord puts th
error message with the model object
Controller or view can access them
unless question = Question.create(params[:question])
validation_error = question.errors.on(:qtext)
end
Web 2.0 Application Development – p. 7

78. Rolling on Rails
Error handling in forms
views display all the error messages in a box
using
<%= error_messages_for :question %
Web 2.0 Application Development – p. 7

79. Rolling on Rails
Routing
all incoming requests are mapped to an action
in a controller
http://localhost:3000/questions/2/edit = controller/id/actio
other path info in URL, or URL parameters,
put in params hash
Web 2.0 Application Development – p. 7

80. Rolling on Rails
RESTful architecture
RESTful controllers
easier to code and test
more scalable
simple
may be hard to understand and apply
Web 2.0 Application Development – p. 8

81. REST
style of architecting networked applications
is not RPC
heavily based on HTTP and the Web
is not design
Web 2.0 Application Development – p. 8

82. REST
RPC - web based mailbox
[id, body , [id,body], ..] = getAllMails()
[id, body , [id,body], ..] = getAllUnreadMails()
id = createNewMessage(body, recipient-emailid)
archiveMail(id)
deleteMail(id)
addLabel(id, label)
Web 2.0 Application Development – p. 8

83. REST
REST Triangle
Nouns (URI)
Verbs (GET, POST, PUT and DELETE)
Content-Type (Representation)
Web 2.0 Application Development – p. 8

84. REST
REST - web based mailbox
Identify nouns
• /mails – All mails
• /mails/unread – All unread mails
• /mails/:id – A particular mail
• /mails/:id/archived – archive flag of that
particular mail
• /mails/:id/labels – all labels for that mail
Web 2.0 Application Development – p. 8

85. REST
REST - web based mailbox
GET /mails
GET /mails/unread
POST /mails
PUT /mails/:id/archived
DELETE /mails/:id
POST /mails/:id/labels
Ref: http://rest.blueoxen.net/cgi-bin/wiki.pl?RestInPlainEnglish
Web 2.0 Application Development – p. 8

86. Rolling on Rails
Rails Philosophy
DRY (every piece of knowledge is expressed i
just one place)
COC (sensible defaults)
Rails is Agile (quick turnarounds, testing is
intertwined)
It’s fun (don’t tell anyone ;-))
Web 2.0 Application Development – p. 8

87. Day 3
AJAX with Rails
Enhance Quiz app
Javascript, Jquery
Web 2.0 Application Development – p. 8

88. Rolling on Rails
AJAXify the add a question form
Move “add a question” form on the index page an
save without reload
Web 2.0 Application Development – p. 8

89. Rolling on Rails
AJAXify the add a question form
create _question_form partial from
new.html.erb and call that partial from
index.html.erb (and new.html.erb)
initialize @question in
QuestionsController#index (as in
QuestionsController#new)
Web 2.0 Application Development – p. 8

90. Rolling on Rails
redirect_to questions_url in
QuestionsController#create
change form_for to
remote_form_for(@questions) in
index.html.erb
Web 2.0 Application Development – p. 9

91. Rolling on Rails
add id (questions_list) to table in
index.html.erb
from table row in for loop in index.html.erb,
extract partial _question and call that from
index
<%= render :partial => ’question’, :object => question %>
add javascript_include_tag :defaults to
questions.html.erb layout
Web 2.0 Application Development – p. 9

92. Rolling on Rails
QuestionsController#create add js block:
format.js {
render :update do |page|
page.replace_html(’question_form’,
:partial => ’question_form’,
:locals => { :question => Question.new })
page.insert_html(:bottom, ’questions_list’,
:partial => ’question’, :object => @question)
end
}
Web 2.0 Application Development – p. 9

93. Rolling on Rails
RJS - Ruby to Javascript
we didn’t write any Javascript code
look at the calls to prototype library that was
generated (index.html)
Web 2.0 Application Development – p. 9

94. RJS siblings
Java to Javascript translation
• GWT
• DWR - also supports reverse AJAX
Web 2.0 Application Development – p. 9

95. Web resources
Ruby:
http://www.ruby-lang.org
http://www.rubycentral.com/pickaxe
http://rubyforge.org
http://rubygems.org
http://ruby.alltop.com/
Rails:
http://rubyonrails.org
http://api.rubyonrails.org
Web 2.0 Application Development – p. 9

96. Books
Programming Ruby, The Pragmatic
programmer’s Guide, 2 ed. aka Pickaxe
Ruby book by Dave Thomas et al.
The Ruby way by Hal Fulton.
Agile Web Development with Rails, 2nd
Edition by Dave Thomas, David Heine-
meier Hansson, et al.
Web 2.0 Application Development – p. 9

97. More on AJAX
Basically, what "Ajax" means is "Javascript now works."
- Paul Graham
Various styles of Doing AJAX:
XmlHttpRequest object (Javascript libraries)
dynamic script tags (static JS generates
javascript and evals)
iframes
Web 2.0 Application Development – p. 9

98. Javascript toolkits
Javascript libraries: prototype,
scriptaculous, Jquery, Dojo, ExtJS and
many more
unobtrusive JS (no onclick on mixing JS
inside HTML - all JS outside in a
separate file - maintenance is easier,
graceful degradation for non JS browsers
common features of toolkits (Effects,
traversal, AJAX, enhanced controls)
Web 2.0 Application Development – p. 9

99. Jquery
cross browser
CSS style selectors for
traversal
slick effects
thriving ecosystem of plug-
ins
Web 2.0 Application Development – p. 9

100. Jquery
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
// Your code here
});
</script>
</head>
<body>
<p class="note">I am excited to step into the cyberspace.</p>
<p class="greeting"><a href="#">Hello World!</a></p>
</body>
</html>
Web 2.0 Application Development – p. 10

101. Jquery
CSS style selectors
$(".greeting a").click(function(event
alert("Welcome!");
});
Web 2.0 Application Development – p. 10

102. Jquery
Add CSS class
<!-- Add to head section -->
<style type="text/css">
.grey { color: #aaa }
</style>
$(".greeting a").click(function(event
$(".note").addClass(’grey’);
});
Web 2.0 Application Development – p. 10

103. Jquery
Effects
$(".greeting a").click(function(event
$(".note").slideToggle();
});
Web 2.0 Application Development – p. 10

104. Jquery
Plugin - tablesorter
<!-- add to head section -->
<script src="http://tablesorter.com/jquery.tablesorter.min.js"
type="text/javascript">
</script>
<!-- replace p.note -->
<p class="note">I am excited to step into the cyberspace.
<table border="1">
<thead><th>Name</th><th>Message</th></thead>
<tr><td>Alan Turing</td><td>Theoretical formulation</td></tr>
<tr><td>Jon Von Neumann</td><td>Stored-program architecture</t
<tr><td>ARPA</td><td>Internet</td></tr>
<tr><td>Tim Berners Lee</td><td>World Wide Web</td></tr>
</table>
</p>
Web 2.0 Application Development – p. 10

105. Jquery
Plugin - tablesorter
<!-- call Jquery tablesorter -->
$(".note table").tablesorter();
Many many great plugins
Makes Javascript accessible and fun!
Web 2.0 Application Development – p. 10

106. Day 4
Feeds, Microformats
Mashup - develop an example app
Tag cloud, Reverse AJAX
Flash
Web 2.0 Application Development – p. 10

107. Feeds
Important since data
is the king in Web 2.0
can be read in feed
readers like Google
reader or iGoogle,
Netvibes, PageFlakes
popularized by blogs
Web 2.0 Application Development – p. 10

108. Feeds
used in web app operations, news and stock
ticker,
converted to email, stored in databases, or
mashed
Many different formats: RSS 0.91, RSS 2.0,
ATOM, RDF: but they all work with popular
feed readers. So, not a problem
Web 2.0 Application Development – p. 10

109. Feed
How they work
poll to check for new content:
creating feeds: manual, automatic
homework: create a feed for questions - many
admins adding questions, keep a feed of edits
(keep a feed of users playing quizzed at your
site)
Web 2.0 Application Development – p. 10

110. Mashups
Web 2.0 Application Development – p. 11

111. Mashups
remember data is the king in Web 2.0: feeds o
APIs expose data, combine them to create new
apps
Yahoo pipes
Google maps mashups
http://www.programmableweb.com :
mashups directory
Web 2.0 Application Development – p. 11

112. Terminology
SOA (instead of one executable, have several
applications which communicate over the
network),
REST (an architectural style for building
networked apps - different from SOAP or RPC
SOAP: much like RPC - expose methods to be
called
Web 2.0 Application Development – p. 11

113. Terminology
REST: URI, fixed verbs (GET, POST, PUT,
DELETE) and content-type
Twitter’s API is RESTful
Amazon’s ECS (affilicate API) is SOAP
Web 2.0 Application Development – p. 11

114. Mashup Exercise
Mashup Google maps and Twitter
Sign up for Google maps API
(http://code.google.com/apis/maps/signup.html)
get a key
Twitter - get all followers:
curl ’http://twitter.com/followers/ids/akmags.json’
Web 2.0 Application Development – p. 11

115. Mashup Exercise
Mashup Google maps and Twitter
Get details with location of user:
curl ’http://twitter.com/users/show/54126460.json’
Get Lat Long of a location in JSON format:
curl
’http://maps.google.com/maps/geo?q=Bangalore&output=json&oe=utf8&senso
Google maps HTML example:
http://code.google.com/apis/maps/documentation/introduction.html
Web 2.0 Application Development – p. 11

116. Microformats
Ways of encoding data in HTML/XML which
is widely understood
examples: contact details, geographic info,
calendar/event, rel=nofollow (proposed by
Google)
use class or rel attribute which is already valid
HTML
Web 2.0 Application Development – p. 11

117. Microformats
Google indexes and
displays uf separately
Browser plugins acts on
them
Operator for Firefix,
Oomph for IE
picoformats (twitter @)
Web 2.0 Application Development – p. 11

118. Tag cloud
Visual representation of
tags
Exercise: Add tags to ques-
tions in quiz app and show
a tag cloud
Web 2.0 Application Development – p. 11

119. Reverse AJAX
Push technology
comet
slow load
eg. AppJet Framework used for etherpad
(http://www.etherpad.com)
Web 2.0 Application Development – p. 11

120. Flash
tool for creating interactive and animated We
sites.
uses vector graphics - can be scaled to any siz
without losing clarity/quality
does not require programming skills and is
easy to learn
Web 2.0 Application Development – p. 12

121. Flash
Preferable to animated images and
Java applets
loads faster
allows interactivity
> 96% browsers have flash preinstalled
Video sharing, games sites use flash
(youtube.com, flash-game.net etc.)
Web 2.0 Application Development – p. 12

122. Flash
Need a flash program to create flash content
(eg. Adobe Flash Lite)
Save as ’.swf’ movie, upload to web-server
Minimum HTML code to embed it on your
page
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>
Web 2.0 Application Development – p. 12

123. RIAA
Rich Internet application
web app with characteristics of desktop
applications
using browser plugins like Flash
Frameworks: Curl, Adobe Flash/Adobe
Flex/AIR, Java/JavaFX and Microsoft
Silverlight
Web 2.0 Application Development – p. 12

124. Other latest trends
Keep an eye on these too
Offline Web apps
Nosql - MongoDB, CouchDB, Tokyo cabinet
Web 2.0 Application Development – p. 12

125. Thanks
Web 2.0 Application Development – p. 12