Download
Upcoming SlideShare
Loading in...5
×
 

Download

on

  • 531 views

 

Statistics

Views

Total Views
531
Views on SlideShare
531
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Download Download Presentation Transcript

  • Web 2.0 David De Roure Mark Borkum
    • It reminds us about why we’re here
    • It illustrates an immensely successful architectural style
    Why?
  • Who are we? FREE THE SERVICES! FREE THE DATA! FREE THE PEOPLE! View slide
  •   View slide
  •  
    • Social networking
    • Wikis
    • Mashups
    • REST APIs
    • Google Maps
    • Technologies:
      • AJAX, JSON, Ruby on Rails, ...
    • Web as a distributed application platform
      • Amazon S3 and EC2
    What is Web 2.0?
  • 1. The Long Tail 2. Data is the Next Intel Inside 3. Users add value 4. Network effects by default 5. Some Rights Reserved 6. The Perpetual Beta 7. Cooperate, don’t Control 8. Software above the level of the single device Web 2.0 design patterns www.oreilly.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  • use Web 2.0 here Grid Grid cloud HPC
  •  
  • Representational State Transfer
    • listUsers() getUser() addUser() removeUser() updateUser() listLocations() getLocation() addLocation() removeLocation() updateLocation()
    http://example.com/users/ http://example.com/users/{user} (one for each user) http://example.com/locations/ http://example.com/locations/{loc} (one for each location)
    • exampleAppObj = new ExampleApp('example.com:1234')
    • exampleAppObj.removeUser('001‘)
    Representational State Transfer userRes = new Resource('http://example.com/users/001') userRes.delete()
  •  
  •  
  •  
  •  
  • programmableweb.com
    • Find out about Web 2.0
    • Find out about each other
    • Have fun!
    • Leave you thinking about people and about Web 2.0 approaches in the background until the end of the summer school and beyond!
    Objectives
    • If you’re a JavaScript / AJAX / REST guru...have fun and help others have fun too!
    • If you know a bit of JavaScript or would like to learn some quickly...follow the exercise
    • If you just want to try some code out...that’s fine too 
    Practical
    • Dave’s Web 2.0 intro (15 mins)
    • Get Google keys (optionally firebug) (10 mins)
    • Mark’s JavaScript intro and primer (10 mins)
    • We all exercise together (30 mins)
    • Self-paced mashing session (45 mins)
    • NavMaster 3000 (10 mins)
    Plan
  • Before we start the practical…
    • Find our page from the programme
    • As many people as possible (at least one per group) get a Google Maps API key:
    • You will need a Gmail account
    • Go to
    • http://code.google.com/apis/maps/signup.html
    • You will need to enter the Web Site URL
    • http://www.issgc.hpcc.sztaki.hu/~issgcXX
    ISSGC'08 - Intro to Web 2.0 mashups 7/7/2008
  • Before we start the practical… (2)
    • FireBug - http://getfirebug.com/
      • The greatest Firefox plug-in in the world (ever!)
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • JavaScript in 5 minutes
    • What is JavaScript?
      • An interpreted language that supports multiple programming paradigms
    • Where is it executed?
      • Typically (but not always) within the client’s Web browser
    • Why is it called JavaScript?
      • Originally it was called LiveScript
      • The name was changed to JavaScript when Sun and Netscape agreed on a “co-marketing deal” (according to Wikipedia..)
    ISSGC'08 - Intro to Web 2.0 mashups 7/7/2008
  • JavaScript in 5 minutes (2) For more code examples, read the JavaScript Primer ISSGC'08 - Intro to Web 2.0 mashups 7/7/2008 Idiom Syntax Everything is a “var” var foo = “hello”; Arrays are primitives var array = [ 100, 200, “cat” ]; Associative arrays are primitives var ages = { “Fluffy”: 3.25, “Fido”: 7.5 }; Functions are primitives var myfunc = function(x, y) { return y ? x + “, “ + y : x; }; Function parameters are optional myfunc(“hello”, “world”)  “ hello, world” myfunc(“hello”)  “ hello”
  • Prototype JavaScript framework
    • Object-oriented framework with browser-independent functionality for:
      • Document Object Model (DOM),
      • Asynchronous JavaScript and XML (AJAX),
      • Classes, inheritance and modules (“mixins”)
      • JavaScript Object Notation (JSON)
      • … and much more!
    • http://prototypejs.org/api/utility
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • Enumerable - JavaScript meets Ruby
    • Prototype was originally developed as a library for Ruby on Rails..
      • Many classes and modules were ‘adapted’ for Prototype
    • Enumerable is a module that provides standard methods for enumerations
    • An enumeration has:
      • 1..N elements
      • A method for returning the i th element
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • Enumerable - Iterators as functions
    • each(iterator [, index])
      • Executes the iterator once for each element
    • collect(iterator [, index])
      • Executes the iterator as a closure
      • Returns the result as an Array
    • map(iterator [, index])
      • Alias for collect()
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • Google Maps API
    • Comes in 3 flavours:
      • JavaScript
      • ActionScript
      • REST (a.k.a. “Static Maps”)
    • Useful links (one for each flavour):
      • http://code.google.com/apis/maps/documentation/reference.html
      • http://code.google.com/apis/maps/documentation/flash/
      • http://code.google.com/apis/maps/documentation/staticmaps/
    • Today, we’ll be looking at [asynchronous] JavaScript!
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
    • You are now primed!
    • On the Web pages, you can now go to 2.0 
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • “ Hello, World!” for Google Maps
    • One map, one marker…
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
    • <html><head>
    • <script type=&quot;text/javascript&quot;
    • src=&quot;http://www.google.com/jsapi?key=##YOUR_KEY##&quot;></script>
    • <script type=&quot;text/javascript&quot;>
    • google.load(&quot;maps&quot;, 2);
    • google.setOnLoadCallback(function() {
    • var map = new google.maps.Map2($(&quot;map&quot;));
    • var latlng = new google.maps.LatLng(46.95, 17.88);
    • var marker = new google.maps.Marker(latlng);
    • map.setCenter(marker.getLatLng());
    • map.addOverlay(marker);
    • });
    • </script></head>
    • <body>
    • <div id=&quot;map&quot;></div>
    • </body></html>
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups Load the Google JavaScript Bootloader Load the Google Maps API Execute this function when all libraries are ready Create the Map Create the Marker Center the Map on the Marker Add the Marker to the Map (X)HTML placeholder for Map
  • Practical
    • 1. “Hello, World!”
      • Getting started
    • 2. XML Processing
      • Asynchronous XML requests
      • Manipulating the DOM in JavaScript
    • 3. Geolocation
      • From postal addresses to co-ordinates..
    • 4. Directions
      • For a single destination,
      • For up to N destinations (where N  25..)
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • The “Big 5” Prototype operators
    • $(id 0 , id 1 , … id N )  Array of Elements
      • Reads the DOM once and extracts elements with matching identifiers
    • $$(cssSelector)  Array of Elements
      • Reads the DOM once and extracts all elements that match the CSS selector (“rule”)
    • $F(id)  value or null
      • The “field expert”, returns a pointer to the “value” of the field
    • $A(enumerable)  Array
      • Converts an enumerable object to a Prototype Array
    • $H(object)  Hash
      • Converts any object to a Prototype Hash (associative array)
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • The NavMaster 3000
    • Competition time!!
      • In your groups, design and build a mashup that utilises the Google Maps API
    • Submission Guidelines:
      • Use (X)HTML, CSS, JavaScript and XML
      • Comment your code (please!)
      • One entry per group, mailed to mib104@ecs.soton.ac.uk
      • Entries will be accepted until 5pm on Wednesday 17 th
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • The NavMaster 3000 (2)
    • Rules (there is only 1):
      • Your mashup must be called “The NavMaster 3000”
    • Some ideas to get you started:
      • A “radar” to tell you where your friends are,
      • A “directory” for ISSGC organisers,
      • An “agent” that extracts addresses from a Web page and plots them on a Google map.
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • For more ideas…
    • Browse the “Programmable Web”, an online directory of mashups, APIs, tutorials and discussions:
      • http://www.programmableweb.com/mashuplist
    • Conclusions:
      • Web 2.0 is using new technologies to deliver a richer user experience.
      • Google JavaScript APIs are simple!
      • Malcolm likes cats!
    7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups
  • Web 2.0 To Be Continued On Friday 18th David De Roure