Web Mashups
Dr Bogdan Vrusias
www.cs.surrey.ac.uk
Mashup…
• We knew mashup as:
– the process of producing a new song
by mixing two or more existing songs…
• But in web terms is:
– a web application that integrates more
than one information sources under a
united interface
• Basic types:
– consumer mashups
– data mashups
– business mashups
www.cs.surrey.ac.uk
Distributed Systems… is the Origin
• “A distributed system in which the computer power in the system is
distributed geographically around a number of computers which
share the processing load of the system.”
• “A distributed object is an object which is resident on one computer
and for which methods can be invoked associated with code
resident on other computers.”
www.cs.surrey.ac.uk
e-Commerce
•
•
•
•
•
•
Auction Sites
Affiliate Sites (free information?)
Banner Adverts
Shopping Malls / Portals
Digital Publishing
Community Sites (Chat Rooms)
• VIRTUAL WORLDS
www.cs.surrey.ac.uk
Web in the Future
•
Industry today:
– Web 2.0 – Mashups!
– Web Services
– The Grid
– RSS
– Broadband TV
•
W3C
– Setting standards
•
Home-based Computers availability:
– Browsers
– Fast connection
– Security?
– Wireless networks
– Mobile devices
– Web enabled home appliances
www.cs.surrey.ac.uk
Mashup… is a Reality.
www.cs.surrey.ac.uk
Mashup Core Components
• Client-side:
– HTML
– CSS
– JavaScript
– Ajax
– …
• Server-side:
– JSP
– ASP
– .NET
– C#
– PHP
– …
www.cs.surrey.ac.uk
How the Web Works!
• The user communicates with the server through the HyperText
Transport Protocol (HTTP), the network protocol for the Web.
• The server then processes the client's request and sends the
response to the client's browser
• The browser then parses the HTML it receives, and then it displays
it's content.
1. Author writes
instructions
5. HTML stream returned to browser
6. Browser processes HTML
and displays page.
3. Web server
locates instructions
file
4. Web server
processes
instructions to
create HTML
2. Client requests a web page
www.cs.surrey.ac.uk
Tiered Architectures
A tier is a logically separated and encapsulated set of processes.
Web 2.0 focus!!!
www.cs.surrey.ac.uk
What the Client-Side is
• The client-side of developing Web applications consists of the
browser, the eXtensive HyperText Markup Language (XHTML) and
the scripting languages.
• Client-side refers to anything happening within the browser.
• JavaScript is a "simple" and "easy" programming language that
works with HTML, XHTML, or XML.
• JavaScript can be used on both client and server side, in order to
build entire Web applications.
www.cs.surrey.ac.uk
DHTML
• Dynamic HyperText Markup Language (DHTML) is the combinative
use of technologies that is needed to output dynamic behaviour in
your Web application.
• The main technologies used for a dynamic behaviour are:
–
–
–
–
–
–
(X)HTML
Cascading Style Sheets (CSS)
Browser Object Model
Document Object Model (DOM)
Scripting Language (JavaScript)
Java Applets
www.cs.surrey.ac.uk
HTML Basics
•
HyperText Markup Language (HTML) is the basic language of the Web,
which allows the developer to specify formatting, layout, and style for the
Web document.
•
An HTML document is divided into the markup syntax and the pure content.
– The markup syntax (called HTML tags) is surrounded by angle brackets
(< … >) to distinguish them from the contents.
– The Web browser parses these tags in order to determine how to
display the document content.
•
The HTML tags contain elements and each element may have attributes.
– Elements define structure, layout, formatting and behaviour.
– Attributes give control over the look and behaviour of the elements
www.cs.surrey.ac.uk
HTML Basics: Elements
•
HTML Elements are divided with a beginning tag (<TagName>) and an
ending tag (</TagName>).
<b>Text</b>
•
The text between the beginning and ending tag is the content of the
element.
•
Some elements contain no content.
<br>
or <br></br>
or <br/>
•
Elements can contain other elements (nested elements).
<p>Text <b>Bold Text<b/>…</p>
www.cs.surrey.ac.uk
HTML Basics: Attributes
•
Attributes are placed within the beginning tag of the element. An attribute
consists of its name, followed by an equal sign, followed by a value within
single ('value') or double ("value") quotes.
<font color="red" size="3">Red Text</font>
<input type="checkbox" checked />
•
A Web document that conforms to the HTML syntax rules is called a wellformed HTML document.
www.cs.surrey.ac.uk
HTML Basics: The basic HTML
Document
Example:
<html>
<head>
<!-- This text will not appear in the browser -->
<title>Title of the page</title>
</head>
<body bgcolor="red">
<h1><font color="blue">Welcome</font></h1>
<p>You will learn basic <b>HTML</b> today.</p>
</body>
</html>
www.cs.surrey.ac.uk
Working with HTML I
•
URIs
– URIs can be absolute or relative (may be case sensitive):
– Absolute:
<img src="http://www.abc.ac.uk/img/banner.gif" />
<img src="/images/banner.gif" />
– Relative:
<img src="banner.gif" />
<img src="images/banner.gif" />
<img src="../images/banner.gif" />
www.cs.surrey.ac.uk
Working with HTML II
•
Colours
– Logical names:
<body bgcolor="blue">…</body>
– Hexadecimal RGB (where 00 is minimum and FF is maximum):
<body bgcolor="#0000FF">…</body>
– There is a browser-safe palette with 216 colours to support the
limitations of 256 colour display systems.
•
Fonts
– Fonts have three basic properties: style, size, and color:
<font face="times, courier, arial" size="3"
color="blue">text</font>
www.cs.surrey.ac.uk
Working with HTML II
•
Hyperlinks
– The anchor tag:
<a href="welcome.html">Welcome page</a>
<a href="welcome.html"><img src="logo.gif"/></a>
•
Character Entities
– Character entities are used when you want to display a character that
has a special meaning to HTML syntax.
– They begin with an ampersand (&) and end with a semicolon (;):
&amp; (ampersand)
&nbsp; (non-breaking space)
&apos; (apostrophe)
&copy; (copyright symbol)
&gt; (greater than)
&lt; (less than)
&quot; (quotation mark) &#945; (Greek small letter alpha)
www.cs.surrey.ac.uk
HTML Table: Basics
•
An HTML table consists of rows and columns. Each block formed by the
intersection of a row and a column is called cell.
•
The main elements related to a table are:
– <table> which states the beginning of a table.
– <tr> which states the beginning of a row.
– <td> which states the beginning of a column.
– <th> which states the beginning of a column's header.
– <caption> which represents the caption for a table.
•
The <table> element has attributes such as:
– border, cellpadding cellspacing, width, height,
align, etc.
•
The <td> element has attributes such as:
– align, valign, width, height, colspan, rowspan, etc.
www.cs.surrey.ac.uk
HTML Table: Example
<table border="1"><caption>CS381 - Course</caption>
<tr>
<th>Week</th><th>Subject</th>
</tr>
<tr>
<td>First</td><td>Introduction</td>
</tr>
<tr>
<td>Second</td><td>Client-Side Web Development</td>
</tr>
<tr>
<td>Third</td><td>Server-Side Web Development</td>
</tr>
</table>
www.cs.surrey.ac.uk
Cascading Style Sheets
•
Cascading Style Sheets (CSS) is a specification that defines how HTML
elements should be formatted and displayed on the browser's page.
•
In a CSS you can define a set of properties such as font size, color and
name, for a specific element on the page.
•
The basic syntax is as follows:
element, element, … {property:value; property:value;…}
•
The specific element style is applied to every element for every page that
uses that style sheet.
•
CSS can be defined in three basic ways in the HTML document:
– Inline: using the style attribute of an element
– Embedded: within the HTML page
– External: as an external file with extension ".css".
www.cs.surrey.ac.uk
CSS: Inline Example
<HTML>
<HEAD>
<TITLE>
CSS example for book
</TITLE>
</HEAD>
<BODY>
<H1 style="color: cyan">The heading</H1>
<P style="font-size: large">
The body text is <I style="background-color:#32CD32;
color: white">displayed</I> here
</P>
</BODY>
</HTML>
www.cs.surrey.ac.uk
CSS: Embedded Example
<HTML>
<HEAD>
<TITLE>
CSS example for book
</TITLE>
<STYLE TYPE = "text/css">
I {background-color: #32CD32; color: white}
H1{color: cyan}
P {font-size: large}
</STYLE>
</HEAD>
<BODY>
<H1>The heading</H1>
<P>
The body text is <I>displayed</I> here
</P>
</BODY>
</HTML>
www.cs.surrey.ac.uk
CSS: External Example I
CStyle.css
p {
margin-left:0.5in;
font-family:arial;
position:relative
}
p.key {
font-size:20pt;
color:red
}
p.normal {
font-size:15pt;
color:navy
}
.margin {
margin-left:0.5in
}
body {
background-color:#D2B48C
}
(… continues on next page)
www.cs.surrey.ac.uk
CSS: External Example II
div.foreground {
margin-left:0.5in;
color:#E2C48C;
font-family:arial;
font-size:120pt;
position:absolute;
top:50px;
left:20px;
z-index:0
}
div.shadow {
margin-left:0.5in;
color:#C2A48C;
font-family:arial;
font-size:120pt;
position:absolute;
top:52px;
left:22px;
z-index:0
}
(… continues on next page)
www.cs.surrey.ac.uk
CSS: External Example III
<html>
<head><title>Welcome Page</title>
<link rel="stylesheet" type="text/css" href="CStyle.css" />
</head>
<body>
<div class="shadow">Courses</div>
<div class="foreground">3 Day Courses</div>
<h1 class="margin">Welcome</h1>
<p class="key"><br />Our training courses are the best.</p>
<p class="normal">Sign up for one of our courses today.</p>
<div class="margin"><br/>
<a href="CourseList.htm">View a list of our courses</a><br/>
<a href="MailingList.htm">
<img src="Mailing.gif" alt="Mailing List" />
Sign up for our mailing list
</a>
</div>
</body>
</html>
www.cs.surrey.ac.uk
DOM Basics: The Object Model I
•
An Object Model comprises of objects connected in a hierarchical structure.
•
The top-most object is called the root of the object model, and all the other
objects stem from it.
•
Objects have properties and methods. Properties define the attributes of
the object, and methods describe the actions that the object has.
•
The object model provides mechanisms where the user can navigate,
request or define properties, and execute methods.
www.cs.surrey.ac.uk
DOM Basics: The Object Model II
•
To navigate to an object in the model you use the dot (.) syntax.
window.location.href = "http://www.google.com"
•
Objects are some times single, but they can also form a collection of
objects.
window.document.forms[0].elements[3]
•
The object model can be represented with a tree structure. Each object is a
node of the tree, and it has a parent node, children nodes, and siblings.
www.cs.surrey.ac.uk
DOM Basics: Browser Object
Model
•
The Browser Object Model describes the object model that a browser
provides the user:
window
document
history
location
navigator
Document object: represents the HTML document including the elements
and attributes.
History object: represents the browser's history object that contain
information about previously navigated pages.
Location object: defines the location of the page loaded in the browser's
window.
Navigator object: provides information about the browser itself.
www.cs.surrey.ac.uk
DOM Basics: The Document
Object Model
•
The Document Object Model (DOM) is a platform and language neutral
model that allows access to its content.
•
Through the DOM you can access any of the elements and attributes of an
HTML document.
window
history
location
navigator
document
anchors
applets
body
forms
images
links
elements
www.cs.surrey.ac.uk
DOM Basics: The Document
Object Model
•
There are three ways to locate and work with elements in an HTML
document using DOM:
DOM as Objects
DOM as Nodes
DOM using an ID
www.cs.surrey.ac.uk
DOM Basics: DOM as Objects
•
To locate an element object within a collection, you define its position in the
document by referring to its index value (limited to collection of elements
only).
document.forms[0].elements[0]
•
This method can be very handy when accessing a collection of similar
elements.
document.images[0].src = "image.jpg"
NOTE: Inserting an element in the document may cause reference problems,
as the elements are depended on their position on the document.
www.cs.surrey.ac.uk
DOM Basics: DOM as Nodes I
•
DOM as Nodes: where you can access any element within the tree
structure of the document. You can get, change, or add nodes to the
document object model.
document.childNodes[0].childNodes[0]
•
The content of an element is called text node and can be accessed by:
document.childNodes[0].text = "text"
•
You can navigate to find any type of attributes in the same way we
accessed the text node. For example to change the source of an image you
would do:
document.childNodes[0].childNodes[0].src = "img.jpg"
www.cs.surrey.ac.uk
DOM Basics: DOM as Nodes II
•
Node walking is not a recommended approach.
•
But… the best thing about the DOM and nodes is that you can add and
remove nodes.
•
E.g.:
new_element = document.createElement("div")
document.childNodes[1].appendChild(new_element)
new_text_node = document.createTextNode("text")
document.childNodes[1].lastChild.appendChild(new_txt_node)
www.cs.surrey.ac.uk
DOM Basics: DOM using an ID
•
DOM using an ID: you can reference a specific element.
document.getElementById("email")
•
Locating elements in a document through the id of the element is preferred,
rather than using the object collections or node walking.
•
You can access all attributes of a specific element:
document.getElementById("img_01").setAttribute("src",
"img_02.jpg")
NOTE: What you have to be aware of is that every element you want to locate
through the DOM has to have a unique id.
www.cs.surrey.ac.uk
R
DOM: Binding Objects
• Basic DOM Objects
Document
Entity
NodeList
Attr
CharacterData
Element
Node
Text
CDATASelection
Comment
www.cs.surrey.ac.uk
R
DOM: document
•
Basic Methods:
createAttribute(attrName) getElementById(id)
createElement(tagName)getElementsByTagName(tagName)
createTextNode(string)importNode(N,deep)
open() Opens output stream to the document
close() Closes output stream to the document
getSelection() Returns the selected text
write() Appends text to document*
writeln() Appends text and a newline character to document*
*Keep in mind that you are writing HTML… NOT straight text!
•
Properties
anchors
URL
bgColor
cookie
links
referrer
height
forms
applets
title
width
images
www.cs.surrey.ac.uk
R
DOM: Node
•
Basic Methods:
appendChild(N) Adds node, N, to the end of the list of children
cloneNode(deep) Returns a duplicate of this node. If deep is true then recursive
insertBefore(N,E) Inserts the new child node, N, before existing node E
removeChild(N) Removes child node N from the list
replaceChild(N,E) Replaces and returns existing child node, E, with node N
•
Properties
attributes
firstChild
nodeName
nodeType
nextSibling
•
childNodes
lastChild
nodeValue
parentNode
previousSibling
Constants
ELEMENT_NODE: 1
ATTRIBUTE_NODE: 2
TEXT_NODE: 3
ENTITY_NODE: 6
COMMENT_NODE: 8
NOTATION_NODE: 12
www.cs.surrey.ac.uk
R
DOM: Element
•
Basic Methods:
getAttribute(attribute_name) Returns the attribute value
getAttributeNode(attr_name) Returns an Attr object
getElementsByTagName(tag_name) Returns a NodeList of all elements
hasAttribute(attr_name) Returns true if attribute exists
removeAttribute(attr_name) Removes the attribute
setAttribute(attr_name, value) Adds the attribute with a value
removeAttributeNode(attr) Removes the Attr object
setAttributeNode(attr_name, value) Adds the Attr object with a value
•
Properties
tagName
www.cs.surrey.ac.uk
R
DOM: Other Objects
•
NodeList
Basic Methods:
item(index) Returns a particular node from the list
Properties
length
•
Attr
Properties
name
•
value
ownerElement
Text and CharacterData
Basic Methods:
substringData(offset, count) insertData(offset, str)
appendData(str)
deleteData(offset, count)
Properties
data
length
www.cs.surrey.ac.uk
JavaScript: Introduction I
•
With HTML only, there is no way you could perform any kind of dynamic
operation over the information within the document.
•
Once the pure HTML document is displayed on the browser the page is
static.
•
What makes a page dynamic is the scripting language.
•
The scripting language allows the creation of dynamic HTML (DHTML)
pages, where the user can, for example, perform calculations, change the
user interface, or generate dynamic content, all that within the same page.
•
JavaScript is the most popular client-side scripting language.
•
JavaScript is not an independent language that could create stand alone
applications. It can only run within another application (the browser).
NOTE: JavaScript is NOT Java!
www.cs.surrey.ac.uk
JavaScript: Basic Syntax I
•
With JavaScript the developer can:
– Define variables
var x = 1;
– Define arrays
imgs = new Array("img1.jpg", "img2.jpg",
"img3.jpg");
– Create objects
var newElement = document.createElement("div");
– Create and call functions
function add(x, y) {
return x+y;
}
…
sum = add(2, 3);
www.cs.surrey.ac.uk
JavaScript: Basic Syntax II
– Respond to events
<img src="img.jpg" id="img" onmouseover="doit();"/>
– Perform basic operations
x = x + 5;
– Use basic control statements
if (x>y) { y=x; } else { x=y; }
– Comment the source code
x += 4 // this is a comment
/* using this type of comments you can go over many
lines of code */
www.cs.surrey.ac.uk
JavaScript: Basic Syntax III
•
JavaScript is case sensitive (optional for some browsers)
•
Variables should be defined (optional… but recommended)
•
Each statement ends with a semicolon (optional for some browsers)
NOTE: Commenting the source code is very helpful, but remember that the
user can see the source code, so you may not want to give too many
details about something!!!
www.cs.surrey.ac.uk
JavaScript: Functions
•
Using functions the developer structures the code and makes it more
efficient.
•
Function is a logical set of statements that perform a specific task.
•
Function syntax:
function add(x, y) {
var sum;
sum = x + y;
return sum;
}
•
The code within a function is only executed when the function is called. To
call a function you type:
s = add(3, 8);
www.cs.surrey.ac.uk
JavaScript: Events
•
Events are generated from the elements within the HTML document.
•
Events are caused by the user when an action is performed. Then the
browser flags an event associated with the performed action.
•
An event handler executes the associated action for the respective event.
<img src="close.jpg" id="close"
onclick="closeWindow();" />
or
<img src="close.jpg" id="close"
onclick="window.close();" />
•
Each element has a specific set of event handlers.
www.cs.surrey.ac.uk
JavaScript: How it works
•
Because the JavaScript is executed as the page is parsed by the browser
(from top to bottom), there is a possibility that some errors may occur:
– If you refer to a function that has not yet been processed by the
browser you will get an error.
– Once the document is fully displayed there is no way you can add
dynamic text to the document (e.g. by document.write("abc");)
•
For security reasons JavaScript cannot perform operations such as:
– Read directory structures
– Execute commands or applications
•
JavaScript can be defined is three basic ways in the HTML document:
– Inline
– Embedded
– External
– Combination of the above
www.cs.surrey.ac.uk
JavaScript: Inline scripting
•
•
•
•
Inline scripting is used when the user performs an action on an element.
<img src="close.jpg" id="close"
onclick="window.close();" />
<img src="close.jpg" id="close"
onclick="gotoPage('1');" />
You can take advantage of the fact that the element is implied when the
script is inline with the element's tag.
<img src="img.jpg" id="img"
onmouseover="src='img_2.jpg';"
onmouseout="src='img_1.jpg';" />
From the previous example we observe the use of single quotes within
double quotes to be able to distinguish one from the other.
You could also have the double quotes within the single quotes, but you
can never use same quotes within same quotes.
www.cs.surrey.ac.uk
JavaScript: Embedded scripting
•
Embedded scripting is the most popular way of scripting.
•
Its basic syntax is:
<script type="text/javascript">
<!-window.alert("Hello World!");
//-->
</script>
•
The main body of the script is placed within <!-- and //-->. This is done
for the browsers that do not support JavaScript, so that the script is not
processed and displayed on the screen.
•
Embedded scripting is used when we want to create functions. Functions
will be executed only when they are called.
www.cs.surrey.ac.uk
JavaScript: External scripting
•
External scripting is used when you want to reuse your code all over your
Web pages.
•
Having an external JavaScript file that all of your pages use, saves you
from having to update your code over every page that uses it.
•
The external JavaScript file is a plain text file with the extension ".js" (e.g.
unis.js).
•
The reference to an external JavaScript file from an HTML page is as
follows:
<script language="javascript" src="unis.js" /script>
www.cs.surrey.ac.uk
JavaScript: Event Handlers
• Event handlers are very important part of a dynamic page, as they
respond to the user's actions.
• There are some standard events that are used by most elements
and there are other specific to one or just a few elements.
• Event handlers are lowercase and curry an "on" prefix.
• Some standard event handlers are:
onfocus
onmouseout
onkeydown
onunload
onmousemove
onselect
onblur
onclick
onkeyup
onmousedown
onkeypress
onreset
onmouseover
ondblclick
onload
onmouseup
onchange
onsubmit
www.cs.surrey.ac.uk
JavaScript: Operators
•
Operators operate on values. There are five types of operators:
–
–
–
–
–
Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
String Operators
www.cs.surrey.ac.uk
R
JavaScript: Arithmetic Operators
Operator
Description
Example
Result
+
Addition
x=2
x+2
4
-
Subtraction
x=2
5-x
3
*
Multiplication
x=4
x*5
20
/
Division
15/5
5/2
3
2.5
%
Modulus (division remainder)
++
Increment
5%2
10%8
10%2
x=5
x++
1
2
0
x=6
--
Decrement
x=5
x--
x=4
www.cs.surrey.ac.uk
R
JavaScript: Assignment Operators
Operator
Example
Is The Same As
=
x=y
x=y
+=
x+=y
x=x+y
-=
x-=y
x=x-y
*=
x*=y
x=x*y
/=
x/=y
x=x/y
%=
x%=y
x=x%y
www.cs.surrey.ac.uk
R
JavaScript: Comparison Operators
Operator
Description
Example
==
is equal to
5==8 returns false
!=
is not equal
5!=8 returns true
>
is greater than
5>8 returns false
<
is less than
5<8 returns true
>=
is greater than or equal to
5>=8 returns false
<=
is less than or equal to
5<=8 returns true
www.cs.surrey.ac.uk
R
JavaScript: Logical Operators
Operator Description
&&
and
Example
x=6
y=3
(x < 10 && y > 1)
returns true
||
or
x=6
y=3
(x==5 || y==5)
returns false
!
not
x=6
y=3
x != y
returns true
www.cs.surrey.ac.uk
R
JavaScript: String Operators
•
The String Operator contains all comparison operators and the
concatenation operator (+).
•
You can concatenate strings with strings, or even string with numbers.
When concatenating strings with numbers the number is automatically
converted into string, so the result is a string.
var id=123;
var name="Andrew";
document.write("Name=" + name + " has id=" + id);
www.cs.surrey.ac.uk
JavaScript: Objects
•
JavaScript supports a set of built-in core language objects available for
both the client and the server side development platforms.
•
The basic built-in core language objects are:
•
Global Object
Array Object
String Object
Date Object
Math Object
Number Object
Error Object
Boolean Object
RegExp Object
Function Object
You can also create your own objects
www.cs.surrey.ac.uk
JavaScript: Control Statements
•
You can build complex control statements with JavaScript. The basic
control statements are:
– Conditional Statements
• if
• if…else
• try…catch…finally
– Looping Statements
• for
• for…in
• while
• do…while
• break and continue
– With Statement
– Switch Statement
– …
www.cs.surrey.ac.uk
R
JavaScript: Conditional Statements
if (condition) { statements }
if (email=="") { alert("Please fill in the email box"); }
if (condition) { statement } else {statement }
if (email=="") { alert("Please fill in the email box");}
else { submitPage();}
try { statement } catch(exception) { statement } finally {
statement }
try {
if (id=="") { throw "Invalid id error";}
submitPage(id);
}
catch(e) { alert("Error: " + e); }
finally { close(); }
www.cs.surrey.ac.uk
R
JavaScript: Looping Statements
for ([initExpr];[condExpr];[loopExpr]) { statements }
for (var i=0; i<10; ++i) { alert("Step " + i); }
for (property in Object) { statements }
var dObject = document;
for (var pName in dObject) { alert(dObject[pName]); }
while (condition) { statements }
while (i<10) { alert("i=" + i); i+=2;}
do {statements} while (condition)
do { alert("i=" +i); i+=2;} while (i<10)
break and continue
for (var i=0; i<10; ++i) {
if (i>5) { break; }
if (i<3) { continue; }
alert(i);
}
www.cs.surrey.ac.uk
R
JavaScript: With Statements
with (object) { statements }
…
with (document) {
write("The document\'s title is: " + title);
write("The document\'s URL is: " + URL);
}
www.cs.surrey.ac.uk
R
JavaScript: Switch Statement
switch (expression) {
case value1: statement; break;
case value2: statement; break;
default : statement;
}
var type="red";
switch (type) {
case "red":
alert("red");
break;
case "blue":
alert("blue");
break;
default:
alert("Not red or blue");
}
www.cs.surrey.ac.uk
Mashup Resources
• Popular APIs
– Google Maps [link]
– Amazon Web Services [link]
– Flickr [link]
– Twitter [link]
– YouTube [link]
• Mashup Editors
– Google [link]
– Popfly [link]
– Yahoo! Pipes [link]
– Dapper [link]
– QEDWiki [link] [demo]
www.cs.surrey.ac.uk
Mashup Examples
•
BelizeMapia.com - Google Maps Mashup of Belize, C.A
•
RunningMap.com - Yahoo! Maps mashup
•
ePartyGuide.com - A mashup of Yahoo! Maps, Yahoo! Local, and Flickr
•
TopicTrends.com - Using Flickr, Google Maps, YouTube and more
•
Ask500People.com - Real-time mashup of votes from around the world
www.cs.surrey.ac.uk
End of First Session
• NEXT:
– The purpose of the next session is to guide you through the
design and building of three web pages using a variety of Web
Technologies: HTML, CSS and Javascript.
– The first web page, Photos Album, is a web album of nice
photos.
– The second is an index that links to the other two pages you will
build in this workshop.
– The last one is a historical-geographical tutorial-game, based on
The Ancient Seven Wonders.
www.cs.surrey.ac.uk
Building a Photo Album… Mashup
www.cs.surrey.ac.uk
Contact
For more information:
b.vrusias@surrey.ac.uk
www.cs.surrey.ac.uk
Thank you
www.cs.surrey.ac.uk