Web Directions North » Blog Archive » Mashups

Some audio troubles in the beginning. Sound was coming in from another presentation. An audience member exclaimed, "it’s a mashup!" Laughter ensued.

Presentation by Steffen Meschkat, Kaitlin (Ducky) Sherwood

piece of web 2.0 technologies,

• designed to combine code and data from different sources into the same application.
• reuse
• recombination
• leverage for scalability (Ajax applications)
  • You don’t have to build your own backend to maintain the size of data and the bandwidth required to host these complex applications

Reuse

The difference between theory and practice: In theory, there is no…

• .50s: algorithms
• .60s: programs
• .70s: libraries
• .80s: components
• .90s: patterns
• .00s: services

Recombination

• Web 1.0 (IMG, FRAMESET, IFRAME, APPLET)
• Web 1.5 (RSS, XML, Server-side web services in HTML Applications, portals)
• Web 2.0 (JSONP, Browser-side web services in Ajax Applications)

Mashups 0.1

• IFRAME
• Java Applets
• Ads
• Foreign source fills a rectangular screen name

Mashups 1.0

• APIs - provide behaviour
• Services - provide data
• Use (ie. abuse) vintage web technologies
• Most centrally, cross-site services and libraries
• Foreign source implements the semantics of specific elements (eg: microformats)

Cross Site Script (XSS) Restrictions

• Script in a page cannot access data from another site: no windows, IFRAMEs, XMLhttpRequests, Cookies
• Script can send requests to another site: dynamically load IFRAME, post FORM, load IMG
• but cannot load the response, except for more SCRIPT,
• (Note on XMLHttpRequest: the core Ajax technology doesn’t support maships)

XSS Restrictions Explained:

I have achieved two things by this: first, it solves all phili

Concepts (Maps API)

• a library of IMG tags for places
• an IMG tag with augmented behaviour
• an alternative page format for your content
• a mashup application component
• a collection of browser-side web services

Geocoding translates names into locations

"a successful technology is used for things it was never meant to be used for, and inevitably people will complain…"

More Technology Issues

• DOM (no transactions, clumsy animation, incoherent API, defined in - at the time fashionable - OMG IDL)
• SCRIPT (lexically, syntactically, and semantically not well integrated with HTML)
• Browsers: xbrowser compatibility, history, bookmarks
• Graphics: SVG, VML, PNB, CSS; Flash

compares this to pop music, allows anybody to just jump in and contribute

Mashup Business

• literally, outsourcing
• "data banking"
• "web services industry"

Conclusion

• Conceptually, mashups are just more of what the web is about all along
• Technologically, it’s a brilliant abuse of the dynamic script element
• There is much more to it, and it’s all a mess, and nothing new.
• Progress comes from innovative use of existing technology much more than from deployment of new technology.

Kaitlin (Ducky) Sherwood introduced by Jeremy Keith.

What terms do I need to know

• GIS (Graphical Information Systems)
• Framework
• Markers, pushpins, placemarks, items, points of interest
• Info windows, info balloons, detail windows, descriptions
• Geocoding (finding the lat/long of a location)

How to do a map, how to choose a framework, advantages and disadvantages

The big Picture

• you can make a map, it’s not that hard
• there are a number of maps frameworks, none of which will give you everything you want.
• frameworks get more powerful all the time (and change all the time)

who are the players

• ESRI - high end
• Open Source (GeoServer, MapServer)
  • don’t come as packaged as nicely; ugly street maps
  • they’re servers you need to set up and administer
• Google Maps, Google Earth
  • most robust of the Big 3
• Yahoo! Javascript, Flash
  • Flash API is a nice way to deal with vector data
• Microsoft
  • has a server solution and costs money

What do I need to consider in choosing a framework

• License
• Geographical coverage (changes all the time)
  • check the areas you need
  • check the api as it may not return the same info
    • licensing restrictions
  • api data not usually as detailed
• Browser coverage (MS: No Safari)
• Community
  • is there a mailing list, a wiki, tutorials?
  • Gmaps has best community
• Beauty
• Services available
• Development speed vs beauty/control

License: what can’t you do

• Illegal activities
• Things lives or property rely upon
• Remove or tamper with logos
• Sketchy products
  • basically no porn, alcohol, gambling, etc
• Restrict Access and cannot charge money
  • starting at $10,000 (with Gmaps) you can forego access restrictions
• Bang on their servers too hard
  • you’ll have to pay more otherwise
• Non-compete
• Can’t upload real-time GPS info (Y!)
• Yahoo maintains the right to audit your setup
• Google and Yahoo! require you to sign up for an application ID/Key

What services do the major api frameworks provide

• Street maps
• Satellite images
• Geocoding street addresses
• drawing on the map: markers, polygons, lines, images, info balloons
• driving directions (MS)
• Bird’s Eye vew (MS)
• Traffic (Y!)
• Business listing search (Y! and MS)
• Custom tiles (G and MS)
• Whatever other APIs they support: search, chat, spreadsheets…
• open source services

Can only get about 100 markers on a tile before it chokes

(example using custom tiles to display census information)

How do I do it?

• Data
• "Splat" data onto framework
• Javascript
• Flash*
• Server-side*

(demonstration of Y! maps using the splat technique)

(demonstration of Google Earth using splat technique)

Uses a KML file that can be used on Google Earth and on Google Maps.

decent with only a few markers but there’s a limit to the file size of the markers and the number of different markers you can use

next level up…

• using script with MS maps, looks nicer, have more control. Can do HTML for the info balloons (but doesn’t work in Linux)
• can specify the icon

3rd level of difficulty

• full-fledged application
• own background tiles
• nice info balloons
• nice markers

At an intermediate level

Google Javascript + GeoRSS

• used the same georss as the Yahoo file, but had to parse the file myself
• most work, but gives most control
• can do polygons and polylines (Y! and MS doesn’t do it)
• can do custom tiles

(went through the javascript that pulled of the GMaps example)

The future is polygon based mashups

audience question: "can you rely on the services being available tomorrow?"

It’d be very expensive for the companies to pull the services. huge PR costs.

Posted by Jonathan on 13/02/07 at 11:21 pm