Web 2.

David De Roure
Mark Borkum
 Why?
Why?

• It reminds us about why we’re here

• It illustrates an immensely successful
architectural style
Who
Whoare
arewe?
we?

FREE THE DATA!

FREE THE SERVICES!

FREE THE PEOPLE!

 What
WhatisisWeb
Web2.0?
2.0?
• Social networking
• Wikis
• Mashups
• REST APIs
• Google Maps
• Technologies:
– AJAX, JSON, Ruby on Rails, ...
• Web as a distributed application platform
– Amazon S3 and EC2
 Web
Web2.0
2.0design
designpatterns
patterns
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
www.oreilly.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
use Web 2.0 here
HPC
cloud Grid
Grid
 Representational State Transfer
listUsers() http://example.com/users/
getUser() http://example.com/users/{user}
addUser() (one for each user)
removeUser()
updateUser()
http://example.com/locations/
listLocations() http://example.com/locations/{loc}
getLocation() (one for each location)
addLocation()
removeLocation()
updateLocation()
 Representational State Transfer

exampleAppObj = new ExampleApp('example.com:1234')

exampleAppObj.removeUser('001‘)

userRes = new Resource('http://example.com/users/001')

userRes.delete()
programmableweb.com
 Objectives
Objectives

1. Find out about Web 2.0

2. Find out about each other
3. Have fun!
4. Leave you thinking about people and
about Web 2.0 approaches in the
background until the end of the summer
school and beyond!
 Practical
Practical

1. If you’re a JavaScript / AJAX / REST

guru...have fun and help others have fun
too!
2. If you know a bit of JavaScript or would
like to learn some quickly...follow the
exercise
3. If you just want to try some code
out...that’s fine too 
 Plan
Plan

1. Dave’s Web 2.0 intro (15 mins)

2. Get Google keys (optionally firebug) (10 mins)
3. Mark’s JavaScript intro and primer (10 mins)
4. We all exercise together (30 mins)
5. Self-paced mashing session (45 mins)
6. NavMaster 3000 (10 mins)
 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:
1. You will need a Gmail account
2. 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

7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups 20

 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 21

 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..)

7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups 22

 JavaScript in 5 minutes (2)
Idiom Syntax
Everything is a “var” var foo = “hello”;

Arrays are primitives var array = [ 100, 200, “cat” ];

var ages =
Associative arrays are primitives { “Fluffy”: 3.25, “Fido”: 7.5 };
var myfunc = function(x, y) {
Functions are primitives return y ? x + “, “ + y : x;
};

myfunc(“hello”, “world”)
 “hello, world”
Function parameters are optional
myfunc(“hello”)
 “hello”

For more code examples, read the JavaScript Primer

7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups 23

 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 24
 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 ith element

7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups 25

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 26
 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 27

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 28

 “Hello, World!” for Google Maps
• One map, one marker…

7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups 29

 Load the Google
<html><head> JavaScript Bootloader
<script type="text/javascript"
src="http://www.google.com/jsapi?key=##YOUR_KEY##"></script>
<script type="text/javascript">
Load the Google Maps API
google.load("maps", 2);
Execute this function
google.setOnLoadCallback(function() {
when all libraries
are ready
var map = new google.maps.Map2($("map"));
Create the
var latlng = new google.maps.LatLng(46.95, 17.88); Map
var marker = new google.maps.Marker(latlng);
Create the
map.setCenter(marker.getLatLng()); Marker
map.addOverlay(marker);
}); Center the Map
</script></head> Add the Marker on the Marker
<body>
to the Map
<div id="map"></div>
(X)HTML placeholder for Map
</body></html>

7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups 30

 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 31

 The “Big 5” Prototype operators
• $(id0, id1, … idN)  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 32

 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
[email protected]
– Entries will be accepted until 5pm on Wednesday 17th

7/7/2008 ISSGC'08 - Intro to Web 2.0 mashups 33

 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 34
 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 35

Web 2.0
To Be Continued
On Friday 18th

David De Roure