The Programmable Web II

1. The Programmable Web II • The Programmable Web • Web 2.0 • Ajax • APIs and Mashups • XHTML • Microformats • HTML 5

2. What is Web 2.0? • An attitude not a technology • Web as Platform • Architecture of Participation • Harnessing collective intelligence • Examples: • Flickr, del.ico.us - tagging not taxonomy • BitTorrent - decentralization (separate lecture on BT) • Blogs - participation not publishing • Wikis - radical trust • Google Maps/Ajax - rich user experience

3. What is Web 2.0?

4. Simple Building Blocks • A significant force in the Web 2.0 movement is the belief that Web Services (SOAP/WSDL etc) are too complex • Many APIs are adopting a ‘back to basics’ approach to creating distributed applications • REST • HTTP • URIs • HTML • lightweight, fast to develop

5. Ajax (formerly AJAX) • Used to be an acronym for Asynchronous JavaScript And XML. • But you can do Ajax without Javascript or XML • Unbelievable amount of hype over it when it came out • Now it’s whatever • MS have supported it for years • But other browsers didn’t, so the possibilities did not catch on in a big way • So what is it?

6. Ajax • JavaScript has access to the Document Object Model (DOM) in the browser • A browser that supports Ajax, exposes a small Web client to JavaScript (or any other script supported by a browser) allowing the Javascript to make HTTP requests. • This Object - an ActiveXObject in IE, a XMLHttpRequest in the others takes an HTTP verb (GET, POST etc) and some optional data to send. • It also takes a JavaScript function to call once it has results from the server. • That’s why it’s asynchronous - the Web client goes off and makes the request without the browser window waiting. • When the result comes back, the JavaScript function is called. • The JavaScript takes the results and (typically) inserts them into the DOM displayed by the browser. • It may be XML but could be (JavaScript Object Notation) JSON, or even images (Google Maps) • You see nice things happen.

7. XMLHTTPRequest Passes Data to Javascript function XMLHTTPRequest Gets Data 1. Ask XMLHTTPRequest to get data 2. Insert data into DOM See tutorial code for this example

8. Ajax • Importantly, you see nice things happen without going to a new URL. • This makes the process look seamless • Allows only those parts of a page to change that the application wants • Downsides • it can break the browser’s back button. The browser’s state has changed, but the URL hasn’t. • Reduces the ‘addressability’ of URIs. If I’ve found a location in Google Maps with a particular zoom, I can’t copy the URL in the address bar and email it to a friend. - they’ll just end up at http://maps.google.co.ukstaring at the UK. • You can usually only access the server that served the page on which the JavaScript makes the call from. • Google Map was one of the first big Ajax based services • Images are exempt from single domain rule.

9. Google Maps API • A Sophisticated Ajax based API giving access to: • Map objects • Various funcitonalities e.g. • set the lat/long • set the centre • pan the map • Map events • Do things when when an event happens e.g • The user clicks • Double clicks • drags • Map controls • Different controls e.g zoom • Map overlays • Draw on top of the map e.g. the directions line • Map services • Various functionalities e.g • Reading in data files • Geo coding - converting an address to a lat/long

10. Google Maps • First you need an API key • The API key is mapped to your domain, so you need somewhere to host your page. • Google can tell if you are running from file or on localhost so it will work without an API if you do this. • Then you import the JavaScript Google functionality into your page using a Javascriptsrc attribute. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp; key=1234567890” type="text/javascript"></script> Then you can start using the API – see tutorial code for an example. • More details about the API at: • http://code.google.com/apis/maps/documentation/

11. APIs & Mashups • What are Mashups? • Many enterprises expose their data via a public API • You can write to that API and get some of their data • If you write to a number of different APIs you can do transformations over the data you get back • This generates more data • A Mashup is an aggregation of different APIs to arrive at novel functionality

12. APIs & Mashups • For mashups, as well as a whole list of APIs go to: • http://www.programmableweb.com/ • An interesting API: • Appinions – http://www.appinions.com • Aggregates quotes from all over the Web and provides an API for accessing the data. • The bottom of http://developer.appinions.com/ shows how to go about using the API • Register • Ask for an API key • Start coding • Example code will be available shortly

13. What if I want data from a remote server? • A number of options: • Local server option: • Run a proxy server locally (in the same domain from which the page is served). • Get the browser to call that with the required parameters. • Get the local server to call the real server and get the data. • Pass the data back from the local server to the Javascript • (See an example of this in the tutorial code usingappinions) http://localhost:8080/search/v2/opinions?key=1234567890&sent=libya&format=json&polarity=1 Is converted by the local server to: http://api.appinions.com/search/v2/opinions?key=1234567890&sent=libya&format=json&polarity=1

14. Use Javascript Object Notation (JSON) • Another structured document type, not based on XML. • Instead uses properties, and nested curly braces to describe data: • {"location": {"id": "WashingtonDC", "city": "Washington DC", "venue": "Hilton Hotel, Tysons Corner", "address": "7920 Jones Branch Drive” } } • JSON can be parsed into a Javascript object using the eval(string) method. • By combining dynamically generated script tags (exempt from simple domain restriction) and parsing JSON into Javascript objects, you can bypass the restriction. • But this relies on services returning JSON encoded data.

15. Microformats • Microformats are reusable XHTML structures that you can embed on your page. • They are the opposite of trying to solve everything • They are a reaction to complexity, over-specification, and multiple specifications doing the same thing • What’s XHTML?

16. HTML • HTML Example describing a book <h1>The Cat in the Hat</h1><br> <p>by Dr Seuss</p> <ul> <li>Publisher: HarperCollins</li> <li>Genre: Children’s Fiction</li> <li>Year: 2003</li> <li>ISBN: 0-00-715853</li> </ul> <br>visit the website <a href=“http://harp.co.uk”>here</a>

17. XML • XML Example of a book <?xml version="1.0"?> <book> <title>The Cat in the Hat</title> <author>Dr Seuss</author> <isbn>0-00-715853<isbn> <genre>Children’s Fiction</genre> <published>2003</published> <publisher> <name>HarperCollins</name> <url>http://harp.co.uk</url> </publisher> </book>

18. XHTML • In between HTML and XML • It is valid HTML and valid XML • MUST be well-formed. • Fixed set of tags • Makes use of HTML non-presentational tags. • Defers presentational concerns completely to Cascading Style Sheets (CSS) • Instead uses element attributes to inject presentational hints to the CSS: <div class=“my-important-type”>I’m important</div> class attribute

19. Cascading Style Sheets(CSS) • A rendering language that goes in the header of an HTML page • Property based • element -type {presentation-key : value} • CSS allows for extensibility! • I can define a class, and define rendering hints to the browser for that class: <style type=“text/css”> .my-important-type{font-color: red} </style> And in the document: <div class=“my-important-type”>Hey wait!</div> • Hey, wait! • at the same time as defining rendering hints to the browser, I’m also classifying an element in the document. • Perhaps I can use this to support semantic information, not just rendering information • So I could call my class .book and have elements inside it like .title and .author. Hmm…

20. XHTML example <head> <title>My Book</title> </head> <body> <div class=“book”> <h1 class=“title”>The Cat in the Hat</h1> <p>by <span class=“author”>Dr Seuss</span></p> <ul> <li>Publisher: <span class=“pub”>HarperCollins</span></li> <li>Genre: <span class=“genre”>Children’s Fiction</span></li> <li>Year: <span class=“year”>2003</span></li> <li>ISBN: <span class=“isbn”>0-00-715853</isbn></li> </ul> </div> <p>visit the website at <a href=“http://harp.co.uk” class=“url”>http://harp.co.uk</a> </body>

21. XHTML with some CSS • Here’s what it looks like in a browser with a bit of CSS in the head of the HTML page: The important thing to take away here is that the data has not been lost through rendering. It looks nice for a human, but a machine can still extract the book properties

22. Being POSH • Microformats are based on the concept of POSH • What does it mean to be POSH? • POSH stands for Plain Old Semantic HTML • Employing the best practices of using semantic HTML • Semantic HTML are those tags that are not presentational • The POSH checklist • validate your POSH: http://validator.w3.org/ • drop the use of TABLEs for purely presentational purposes, spacer GIFs, and presentational-html in general and no orphan tags (<br>). • Presentation should be handled by CSS. Things like spacer gifs clutter up the html • Use good semantic-class-names. • Class names should describe what something is, not how it should look.

23. Microformats • Currently a handful of Microformats have moved beyond draft stage, e.g. • hCard - based on the vCard specification • A way of representing a person or organisation • hCalendar - based on the iCalendar spec. • Represents an event • iCalendar is broadly adopted, e.g. Mac’s iCal • XOXO - an XHTML document type for defining outlines • Table of contents • Tree structures • hAtom – Atom feed format • These microformats use the class attribute to define their data members • try to restrict the growth of class names. • (Re)use of them allows easy parsing by machines as well as easy rendering by browsers, and other agents.

24. HTML 5 • Builds on HTML 4 • A set of features, rather than a monolithic spec. • Not all browser support all features yet. • HTML 5 MUST be well-formed • Some core features: • Canvas – drawing area • Video – embed directly – no need for plugins • Local storage – remember Roy Fielding’s shopping cart idea? HTML 5 makes it possible • Multi-threaded Javascript • GEO location • Semantic tags – section, header, footer etc. • Micro data – embedded semantic metadata, e.g. licencing, vCards and your own vocabs.

25. HTML 5 • Micro data – embedded semantic metadata, e.g. licencing, vCards and your own vocabs. • You can create scopes on a tag: <section itemscopeitemtype="http://data-vocabulary.org/Person"> • Then mark up elements within the scope: <imgitemprop="photo” src=“…”/> <pitemprop=”name”>Andrew</p> Then publish your vocabulary so people can use it. Publish in human readable for, and RDF for machine processing. See http://html5demos.com/

26. Conclusion • Tutorials for these technologies are available on the course web page • http://users.cs.cf.ac.uk/A.B.Harrison/distributed/ • Link from learning central – the first announcement • Technorati still haven’t updated their API, so these examples will not work (the eternal beta at work) • Appinions example will be available before the next lab.