Web 2.0 Application development with Ruby on Rails

5,570 views
5,399 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,570
On SlideShare
0
From Embeds
0
Number of Embeds
194
Actions
Shares
0
Downloads
2
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web 2.0 Application development with Ruby on Rails

  1. 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. 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. 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. 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. 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. 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. 7. Day 2 Developing Quiz app with Rails Rails theory RESTful architecture Web 2.0 Application Development – p.
  8. 8. Day 3 AJAX with Rails Enhance Quiz app Javascript, Jquery Web 2.0 Application Development – p.
  9. 9. Day 4 Feeds, Microformats Mashup - develop an example app Tag cloud, Reverse AJAX Flash The End Web 2.0 Application Development – p.
  10. 10. Let’s start.. 6560 Web 2.0 Application Development – p. 1
  11. 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. 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. 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. 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. 15. Web 2.0 The Web 2.0 dilemma Web 2.0 Application Development – p. 1
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 28. Romancing with Ruby Say, Hi! History: Originated in Japan created by Yukihiro Matsumoto (aka Matz) Web 2.0 Application Development – p. 2
  29. 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. 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. 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. 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. 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. 34. Romancing with Ruby Syntax no semicolon needed line beginning with # is a comment Web 2.0 Application Development – p. 3
  35. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 52. Romancing with Ruby Tools Rdoc for online documentation irb for testing your scripts quickly Web 2.0 Application Development – p. 5
  53. 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. 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. 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. 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. 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. 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. 59. Romancing with Ruby OK, that’s it! Web 2.0 Application Development – p. 5
  60. 60. Day 2 Developing Quiz app with Rails Rails theory RESTful architecture Web 2.0 Application Development – p. 6
  61. 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. 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. 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. 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. 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. 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. 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. 68. Rolling on Rails ruby script/server http://localhost:3000/questions create, edit, delete questions Web 2.0 Application Development – p. 6
  69. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 83. REST REST Triangle Nouns (URI) Verbs (GET, POST, PUT and DELETE) Content-Type (Representation) Web 2.0 Application Development – p. 8
  84. 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. 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. 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. 87. Day 3 AJAX with Rails Enhance Quiz app Javascript, Jquery Web 2.0 Application Development – p. 8
  88. 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. 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. 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. 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. 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. 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. 94. RJS siblings Java to Javascript translation • GWT • DWR - also supports reverse AJAX Web 2.0 Application Development – p. 9
  95. 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. 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. 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. 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. 99. Jquery cross browser CSS style selectors for traversal slick effects thriving ecosystem of plug- ins Web 2.0 Application Development – p. 9
  100. 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. 101. Jquery CSS style selectors $(".greeting a").click(function(event alert("Welcome!"); }); Web 2.0 Application Development – p. 10
  102. 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. 103. Jquery Effects $(".greeting a").click(function(event $(".note").slideToggle(); }); Web 2.0 Application Development – p. 10
  104. 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. 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. 106. Day 4 Feeds, Microformats Mashup - develop an example app Tag cloud, Reverse AJAX Flash Web 2.0 Application Development – p. 10
  107. 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. 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. 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. 110. Mashups Web 2.0 Application Development – p. 11
  111. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 125. Thanks Web 2.0 Application Development – p. 12

×