Marlon Pierce, Geoffrey Fox Community Grids Lab Indiana University

Acknowledgements The following people helped create the slides and material for this presentation: Siddharth Maini Joshua Rosen Huapeng Yuan Yu Deng Fatih Mustacoglu

The following people helped create the slides and material for this presentation:

Siddharth Maini

Joshua Rosen

Huapeng Yuan

Yu Deng

Fatih Mustacoglu

We discuss the impact of Web 2.0 on e-Science, Cyberinfrastructure, and Grids

Rich Client Interfaces Concept of rich and interactive user interfaces that are locally deployed to the client machine Designed to increase the usability of the interface Increases the actual User Experience Source: http://www.vw.com/

Concept of rich and interactive user interfaces that are locally deployed to the client machine

Designed to increase the usability of the interface

Increases the actual User Experience

AJAX Stands for Asynchronous JavaScript + XML Ajax is not a technology but a combination of: Standards-based presentation using XHTML and CSS Dynamic update and display content using DOM (Document Object Model) Data communication using XMLHttpRequest Asynchronous JavaScript Being Asynchronous in nature Make requests to the server without a page refresh. Parse and work with XML documents Extensively used by Google. E.g. Google Suggest Used to developed a variety of Web Applications Web page can communicate with web server online as user enters data into an HTML form Source: http://www.google.com/webhp?complete=1&hl=en

Stands for Asynchronous JavaScript + XML

Ajax is not a technology but a combination of:

Standards-based presentation using XHTML and CSS

Dynamic update and display content using DOM (Document Object Model)

Data communication using XMLHttpRequest

Asynchronous JavaScript

Being Asynchronous in nature

Make requests to the server without a page refresh.

Parse and work with XML documents

Extensively used by Google. E.g. Google Suggest

Used to developed a variety of Web Applications

Web page can communicate with web server online as user enters data into an HTML form

<script type=&quot;text/javascript&quot; language=&quot;javascript&quot;> var http_request ; function makeRequest(url) { if (window.XMLHttpRequest) { // For Mozilla, Safari http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // For IE http_request = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } http_request.onreadystatechange = alertContents; http_request.open('GET', url, true); http_request.send(null); function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('There was a problem with the request.'); } } } </script> <span style=&quot;cursor: pointer; text-decoration: underline;&quot; onclick=&quot;makeRequest('test.html')&quot;> Make a request </span> Make an HTTP request using XMLHttpRequest class Provide HTTP request object the name of JavaScript object which will process the response using onreadystatechange property Once the state of request AND status code of server response is checked, we can process the data User makes the request in browser

<script type=&quot;text/javascript&quot; language=&quot;javascript&quot;>

var http_request ;

function makeRequest(url) {

if (window.XMLHttpRequest) { // For Mozilla, Safari

http_request = new XMLHttpRequest();

} else if (window.ActiveXObject) { // For IE

http_request = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;);

}

http_request.onreadystatechange = alertContents;

http_request.open('GET', url, true);

http_request.send(null);

function alertContents() {

if (http_request.readyState == 4) {

if (http_request.status == 200) {

alert(http_request.responseText);

} else { alert('There was a problem with the request.'); }

}

} </script>

<span style=&quot;cursor: pointer; text-decoration: underline;&quot; onclick=&quot;makeRequest('test.html')&quot;>

Make a request

</span>

Output User clicks the link “Make a Request in the Browser” This calls the makerequest(“test.html”) with test.html in the same directory Request is made and then ( onreadystatechange) execution is passed to alertContents() alertContents() verifies the response received and then alert()s the content of test.html file (as part of processing the data)

User clicks the link “Make a Request in the Browser”

This calls the makerequest(“test.html”) with test.html in the same directory

Request is made and then ( onreadystatechange) execution is passed to alertContents()

alertContents() verifies the response received and then alert()s the content of test.html file (as part of processing the data)

Limits of AJAX XMLHttpRequest object lets JavaScript make GET, POST and other types of HTTP requests But as a security feature you cannot call third party domains through latest web browsers Exception IE 5 and 6 only under low security settings You can only make requests back to the original server/hostname Solution: Some hacks/methods Application proxies Apache Proxy JSON

XMLHttpRequest object lets JavaScript make GET, POST and other types of HTTP requests

But as a security feature you cannot call third party domains through latest web browsers

Exception IE 5 and 6 only under low security settings

You can only make requests back to the original server/hostname

Solution: Some hacks/methods

Application proxies

Apache Proxy

JSON

Called as a “fat-free-alternative” to XML and a serialized JavaScript Object It is an ultra-simple lightweight data interchange format Based on subset of JavaScript syntax, array and object literals Supported as an alternative output format by many Web 2.0 Services All Yahoo APIs, Google Maps, Del.icio.us, etc. Extremely fast and powerful Built-in support in Browsers JSON: JavaScript Object Notation

Called as a “fat-free-alternative” to XML and a serialized JavaScript Object

It is an ultra-simple lightweight data interchange format

Based on subset of JavaScript syntax, array and object literals

Supported as an alternative output format by many Web 2.0 Services

All Yahoo APIs, Google Maps, Del.icio.us, etc.

Extremely fast and powerful

Built-in support in Browsers

JSON, Continued Can make cross-domain requests unlike AJAX which uses XMLHttpRequest To make cross-domain requests, just dynamically create your script tags using the DOM Make web services requests using the dynamic script tag request, and Web service lets you specify a JavaScript callback function For more info: http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html Much simpler than XML Mostly used in Ajax web application development CSS can also be expressed in JSON ( http://www.featureblend.com/css-json.html ) JavaScript's eval() method to convert the string into a real JavaScript object Var data = eval('(' + req.responseText + ')');

Can make cross-domain requests unlike AJAX which uses XMLHttpRequest

To make cross-domain requests, just dynamically create your script tags using the DOM

Make web services requests using the dynamic script tag request, and

Web service lets you specify a JavaScript callback function

For more info: http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html

Much simpler than XML

Mostly used in Ajax web application development

CSS can also be expressed in JSON ( http://www.featureblend.com/css-json.html )

JavaScript's eval() method to convert the string into a real JavaScript object

Var data = eval('(' + req.responseText + ')');

JSON Example Defining Arrays in JavaScript JSON Syntax CSS JSON CSS Structure

XML -> JSON XML can be converted to reversible JSON if: all subelements names occur exactly once, or … Subelements with identical names are in sequence. XML can be converted to irreversible JSON if: Sub elements are not unique Element order doesn’t matter Source : Goessner , Stephen. &quot;XML.com: Converting Between XML and JSON.&quot; XML.com . 31 May 2006. O'REILLY. 16 May 2007 <http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html?page=2>.

XML can be converted to reversible JSON if:

all subelements names occur exactly once, or …

Subelements with identical names are in sequence.

XML can be converted to irreversible JSON if:

Sub elements are not unique

Element order doesn’t matter

JSON Compared to XML Source: Zakas, Nicholas C., Jeremy McPeak, and Joe Fawcett. Professional AJAX. 1st ed. WROX Press, 2006. XML String JSON String <classinfo> <students> <student> <name>Michael Smith</name> <average>99.5</average> <age>17</age> <graduating>true</graduating> </student> <student> <name>Steve Johnson</name> <average>34.87</average> <age>17</age> <graduating>false</graduating> </students> </classinfo> { &quot;classinfo&quot; : { &quot;students&quot; : [ { &quot;name&quot; : &quot;Michael Smith&quot;, &quot;average&quot; : 99.5, &quot;age&quot; : 17, &quot;graduating&quot; : true }, { &quot;name&quot; : &quot;Steve Johnson&quot;, &quot;average&quot; : 34.87, &quot;age&quot; : 17, &quot;graduating&quot; : false } ] } } Information repeated repeatedly Information isn’t repeated More bytes needed to store the same information Less Bytes needed to store the same information Have to convert string into JavaScript using: var books = req.responseXML.getElementsByTagName(‘< element_name '); JavaScript's eval() method to convert the string into a real JavaScript object E.g. var data = eval('(' + req.responseText + ')');

JavaScript/AJAX/JSON Toolkits To make writing Web Sites or Web Applications easier to develop GWT (Google Web Toolkit) http://code.google.com/webtoolkit/ YUI (Yahoo! User Interface Library) http://developer.yahoo.com/yui/ DWR http://getahead.org/dwr script.aculo.us http://script.aculo.us/ Prototype http://www.prototypejs.org/

To make writing Web Sites or Web Applications easier to develop

GWT (Google Web Toolkit)

http://code.google.com/webtoolkit/

YUI (Yahoo! User Interface Library)

http://developer.yahoo.com/yui/

DWR

http://getahead.org/dwr

script.aculo.us

http://script.aculo.us/

Prototype

http://www.prototypejs.org/

GWT (Google Web Toolkit) Open source Java software development framework Easier AJAX application development You write your front end in Java using any Java IDE available (e.g. Eclipse, JProfiler, JUnit, IntelliJ…) GWT complier will automatically convert it into browser-complaint JavaScript and HTML Confirm that the Web App. Runs successfully in each browser GWT Architecture GWT Java-to-JavaScript Compiler: Java-to-JavaScript compiler GWT Hosted Web Browser: run and execute your GWT applications JRE emulation library: contains JavaScript implementations of the most widely used classes in the Java standard class library. GWT Web UI class library: set of custom interfaces and classes that let your create web browser &quot;widgets” with use of CSS

Open source Java software development framework

Easier AJAX application development

You write your front end in Java using any Java IDE available (e.g. Eclipse, JProfiler, JUnit, IntelliJ…)

GWT complier will automatically convert it into browser-complaint JavaScript and HTML

Confirm that the Web App. Runs successfully in each browser

GWT Architecture

GWT Java-to-JavaScript Compiler: Java-to-JavaScript compiler

GWT Hosted Web Browser: run and execute your GWT applications

JRE emulation library: contains JavaScript implementations of the most widely used classes in the Java standard class library.

GWT Web UI class library: set of custom interfaces and classes that let your create web browser &quot;widgets” with use of CSS

Benefits of GWT Static type checking in the Java language boosts productivity while reducing errors. Common JavaScript errors are easily caught at compile time rather than at runtime. Code prompting/completion is widely available. Java-based OO designs are easier to communicate and understand Makes your AJAX code base more comprehensible with less documentation. Use GWT’s set of User Interface (UI) to build UI elements making an AJAX application

Static type checking in the Java language boosts productivity while reducing errors.

Common JavaScript errors are easily caught at compile time rather than at runtime.

Code prompting/completion is widely available.

Java-based OO designs are easier to communicate and understand

Makes your AJAX code base more comprehensible with less documentation.

Use GWT’s set of User Interface (UI) to build UI elements making an AJAX application

More GWT Benefits Very low Compiler-generated JavaScript size (approx. 100K for a full GWT app.) End-user performance: GWT apps are always as fast as hand-written JavaScript. Development time: Very little debugging time More time can be spent on application functionality Makes site more usable by adding “back button” functionality Use of JavaScript Native Interface (JSNI) Browser Interoperability Internationalization: create internationalized libraries and apps.

Very low Compiler-generated JavaScript size (approx. 100K for a full GWT app.)

End-user performance: GWT apps are always as fast as hand-written JavaScript.

Development time:

Very little debugging time

More time can be spent on application functionality

Makes site more usable by adding “back button” functionality

Use of JavaScript Native Interface (JSNI)

Browser Interoperability

Internationalization: create internationalized libraries and apps.

GWT Example CODE package com.google.gwt.sample.kitchensink.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.sample.kitchensink.client.Sink.SinkInfo; import com.google.gwt.user.client.History; import com.google.gwt.user.client.HistoryListener; import com.google.gwt.user.client.ui.DockPanel; import com.google.gwt.user.client.ui.HTML; /** Application that demonstrates all of the built-in widgets. */ public class KitchenSink implements EntryPoint, HistoryListener { protected SinkList list = new SinkList(); private SinkInfo curInfo; private Sink curSink; private HTML description = new HTML(); private DockPanel panel = new DockPanel(); private DockPanel sinkContainer;

package com.google.gwt.sample.kitchensink.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.sample.kitchensink.client.Sink.SinkInfo;

import com.google.gwt.user.client.History;

import com.google.gwt.user.client.HistoryListener;

import com.google.gwt.user.client.ui.DockPanel;

import com.google.gwt.user.client.ui.HTML;

/** Application that demonstrates all of the built-in widgets. */

public class KitchenSink implements EntryPoint, HistoryListener {

protected SinkList list = new SinkList();

private SinkInfo curInfo;

private Sink curSink;

private HTML description = new HTML();

private DockPanel panel = new DockPanel();

private DockPanel sinkContainer;

GWT Example Source: http://code.google.com/webtoolkit/documentation/examples/kitchensink/

YUI (Yahoo! User Interface Library) Collection of JavaScript and CSS resources Makes RIA (Rich Internet Applications) easier to build Open source Yahoo! User Interface Library components fall into three groups: Utilities UI Controls , and CSS resources “ Better documented than GWT” (Sidd’s personal opinion) Can be used with Yahoo! Design Patterns Library to easily implement design patterns

Collection of JavaScript and CSS resources

Makes RIA (Rich Internet Applications) easier to build

Open source

Yahoo! User Interface Library components fall into three groups:

Utilities

UI Controls , and

CSS resources

“ Better documented than GWT” (Sidd’s personal opinion)

Can be used with Yahoo! Design Patterns Library to easily implement design patterns

Yahoo Components Utilities Animation : to Create &quot;cinematic effects” Browser History Manager : just like GWT’s Back Button functionality Connection Manager : to manage XMLHttpRequest transactions in a cross-browser fashion Data Source Utility : to provide an interface for retrieving data Dom Collection : Drag & Drop : Create draggable objects that can be picked up and dropped elsewhere on the page Event : gives you easy and safe access to browser events Controls AutoComplete : Button Control Calendar DataTable Control Logger : Provides easy way to write logs to an on-screen console Menu Slider Tab View Tree View CSS Resources CSS Grids CSS Fonts CSS Reset

Utilities

Animation : to Create &quot;cinematic effects”

Browser History Manager : just like GWT’s Back Button functionality

Connection Manager : to manage XMLHttpRequest transactions in a cross-browser fashion

Data Source Utility : to provide an interface for retrieving data

Dom Collection :

Drag & Drop : Create draggable objects that can be picked up and dropped elsewhere on the page

Event : gives you easy and safe access to browser events

Controls

AutoComplete :

Button Control

Calendar

DataTable Control

Logger : Provides easy way to write logs to an on-screen console

Menu

Slider

Tab View

Tree View

CSS Resources

CSS Grids

CSS Fonts

CSS Reset

YUI ANIMATION Example http://developer.yahoo.com/yui/examples/animation/anim_basic.html

DWR (Direct Web Remoting) Java open source library Allows writing AJAX web sites Two Main parts: Java Servlet running on the server to process requests and sends responses back to the browser. JavaScript running in the browser to send requests and can dynamically update the webpage. It dynamically generates JavaScript Feels like the execution is happening in the browser But server is executing the code , and DWR converts data back and forth using a callback function In the example above, DWR dynamically generates the AjaxService class It then converts all parameters and return values between Java and JavaScript

Java open source library

Allows writing AJAX web sites

Two Main parts:

Java Servlet running on the server to process requests and sends responses back to the browser.

JavaScript running in the browser to send requests and can dynamically update the webpage.

It dynamically generates JavaScript

Feels like the execution is happening in the browser

But server is executing the code , and

DWR converts data back and forth using a callback function

In the example above, DWR dynamically generates the AjaxService class

It then converts all parameters and return values between Java and JavaScript

DWR features Integrates with Spring, Struts, WebWork, JSF, Hibernate, Beehive Supported Environments and Application Servers Tomcat, Weblogic, Websphere, Jboss, Jetty, Resin, Sun ONE, Glashfish Ability to asynchronously send data from a web-server to a browser Source: http://getahead.org/dwr/integration

Integrates with

Spring, Struts, WebWork, JSF, Hibernate, Beehive

Supported Environments and Application Servers

Tomcat, Weblogic, Websphere, Jboss, Jetty, Resin, Sun ONE, Glashfish

Ability to asynchronously send data from a web-server to a browser

DWR Example (Wal-Mart) Wal-Mart uses the DWR technology in the “Quick View” Clicking “Quick View” will pop-up a dialog with more details, fetched asynchronously using DWR.

Wal-Mart uses the DWR technology in the “Quick View”

Clicking “Quick View” will pop-up a dialog with more details, fetched asynchronously using DWR.

Features - Script.aculo.us Features: Visual Effects Library: To add animation Drag and Drop JavaScript Library: enables drag-and-drop of elements in your Web App. Dom utilities: Create DOM elements dynamically Ajax Controls Drag and Drop Draggables Autocompletion In Place Editing Integration with development frameworks Ruby On Rails, Perl, Nitro, PHP, Java Plone, DotNet, Symfony, Seaside AIDA/Web, Open ACS, Django Java Script Unit Testing Includes unit and functional tests for itself Catch scripting and syntax errors and presenting them in a useful way without breaking the tests Source: http://wiki.script.aculo.us/scriptaculous/show/UnitTesting Example Test Results

Features:

Visual Effects Library: To add animation

Drag and Drop JavaScript Library: enables drag-and-drop of elements in your Web App.

Dom utilities: Create DOM elements dynamically

Ajax Controls

Drag and Drop

Draggables

Autocompletion

In Place Editing

Integration with development frameworks

Ruby On Rails, Perl, Nitro, PHP, Java

Plone, DotNet, Symfony, Seaside

AIDA/Web, Open ACS, Django

Java Script Unit Testing

Includes unit and functional tests for itself

Catch scripting and syntax errors and presenting them in a useful way without breaking the tests

Source: http://wiki.script.aculo.us/scriptaculous/show/UnitTesting

EXAMPLE Used animation and effects library to replace the Flash animation on the home page. Allows easier maintenance of the drop-down menu

Used animation and effects library to replace the Flash animation on the home page.

Allows easier maintenance of the drop-down menu

Summary GWT YUI DWR Script.aculo.us Code in Java and generate JavaScript/HTML automatically YES NO YES NO Internationalization (easily create international Libraries) YES NO NO NO Integration with frameworks Eclipse, IntelliJ, JProfiler, JUnit NO Spring, Structs, WebWork, JSF, Hibernate, beehive Ruby on Rails, Perl, Nitro, Eclipse, SeaSide, Django, Plone, Java, PHP

Google Gadgets & Widgets Visually appealing mini-applications that work with Google Homepage, Google Desktop, or any page on the web E.g. Calendar, Mail Checker, NASA TV, Stock Prices, Weather Globes, Free SMS etc. Enable a wide variety of visual effects and animation Supports rich markup languages such as Flash, XML Two Types of Google Gadgets Universal Gadgets Desktop Gadgets Date & Time (Universal Gadget) Google Gadget in Google Desktop (undocked and docked view

Visually appealing mini-applications that work with Google Homepage, Google Desktop, or any page on the web

E.g. Calendar, Mail Checker, NASA TV, Stock Prices, Weather Globes, Free SMS etc.

Enable a wide variety of visual effects and animation

Supports rich markup languages such as Flash, XML

Two Types of Google Gadgets

Universal Gadgets

Desktop Gadgets

&quot;Google Code - Google Gadgets.&quot; Google Code . Google Inc.. 17 May 2007 <http://code.google.com/apis/gadgets/>. Universal Gadgets Desktop Gadgets Work in Google Desktop, Google Page Creator, any Web Page, Google Personalized Page, Blogger Works only with Google Desktop Easy to Create - No downloads necessary, No libraries to learn, No Web server required Features Supported Anything that can be done on a WebPage HTML Forms Easy integration with Google Maps/ Web Search ActiveX Client Win32 Libraries Multi-user support through Google Talk e.g. Interactive Games Free form shapes and transparencies Search files, emails etc across computers Easy to use standard UI elements React to user actions outside a gadgets Create without Download Yes No Offline Availability No Yes Languages Supported HTML, JavaScript, generated HTML (eg PHP, Java, Perl, ASP) JavaScript, C, C++, C#, and/or VB.Net

Anything that can be done on a WebPage

HTML Forms

Easy integration with Google Maps/ Web Search

ActiveX

Client Win32 Libraries

Multi-user support through Google Talk e.g. Interactive Games

Free form shapes and transparencies

Search files, emails etc across computers

Easy to use standard UI elements

React to user actions outside a gadgets

Creating Google Gadgets Google Desktop SDK is used for creating Desktop Gadgets using Google Desktop Gadget API Google Gadgets API is used to develop Universal Google Gadgets

Google Desktop SDK is used for creating Desktop Gadgets using Google Desktop Gadget API

Google Gadgets API is used to develop Universal Google Gadgets

How to Make a Desktop Gadget Download the Google Desktop SDK and create the following files gadget.gmanifest files specifies (required) Metadata XML file describing Gadget Components needed to be installed before gadget creation <gadget> element with minimumGoogleDesktopVersion parameter <about> element (required) <install> element (optional) main.xml file (required) Defines the <view> element to specify the overall appearance of the pane main.js file to write the code for gadget functionality (required) To handle the event options.xml file (optional) to add options view (optional) Strings. xml file Contains all language-specific strings that will be visible in your gadget's UI Contains variable assignments for the strings in a particular language.

Download the Google Desktop SDK and create the following files

gadget.gmanifest files specifies (required)

Metadata XML file describing Gadget

Components needed to be installed before gadget creation

<gadget> element with minimumGoogleDesktopVersion parameter

<about> element (required)

<install> element (optional)

main.xml file (required)

Defines the <view> element to specify the overall appearance of the pane

main.js file to write the code for gadget functionality (required)

To handle the event

options.xml file (optional) to add options view (optional)

Strings. xml file

Contains all language-specific strings that will be visible in your gadget's UI

Contains variable assignments for the strings in a particular language.

gadget.gmanifest file The <about> element can include these sub-elements: <id> : The gadget's CLSID. <name> : Your gadget's name. ( Required) <description> : A short description of what the gadget does. ( Required) <version> : The gadget's version number. <author> : Who wrote the gadget. <authorEmail> : An email address for contacting the developer. <authorWebsite> : A URL for your website. <copyright> : A copyright notice. <aboutText> : Text displayed in the gadget's About dialog. <smallIcon> : A 24x24 pixels icon shown in your gadget's title bar. <icon> : A 32x32 pixels icon shown in the gadget's About dialog and in the Alerts UI <eventAPI> : the gadget can use the Google Desktop Event API. <displayAPI usesNotifier=&quot;true&quot; /> : When set to true, enables Sidebar UI notifications. <queryAPI allowModifyIndex=&quot;true&quot; /> : When set to true, allows the gadget to use the Query API and index notifications.

The <about> element can include these sub-elements:

<id> : The gadget's CLSID.

<name> : Your gadget's name. ( Required)

<description> : A short description of what the gadget does. ( Required)

<version> : The gadget's version number.

<author> : Who wrote the gadget.

<authorEmail> : An email address for contacting the developer.

<authorWebsite> : A URL for your website.

<copyright> : A copyright notice.

<aboutText> : Text displayed in the gadget's About dialog.

<smallIcon> : A 24x24 pixels icon shown in your gadget's title bar.

<icon> : A 32x32 pixels icon shown in the gadget's About dialog and in the Alerts UI

<eventAPI> : the gadget can use the Google Desktop Event API.

<displayAPI usesNotifier=&quot;true&quot; /> : When set to true, enables Sidebar UI notifications.

<queryAPI allowModifyIndex=&quot;true&quot; /> : When set to true, allows the gadget to use the Query API and index notifications.

main.xml file (example) Specified that the gadget has main.js as the scripting file Defines 250 X 150 pixel view for the label Set the horizontal and vertical position Set the alignment, size of text, width, horizontal and vertical pin of the label “HELLO_WORLD” (present in strings.xml file) Retrieves the name “iulabs” for the label Enable the element to fire mouse/keyboard events Calls “onTextClick() function defined in main.js file

Specified that the gadget has main.js as the scripting file

Defines 250 X 150 pixel view for the label

Set the horizontal and vertical position

Set the alignment, size of text, width, horizontal and vertical pin of the label “HELLO_WORLD” (present in strings.xml file)

Retrieves the name “iulabs” for the label

Enable the element to fire mouse/keyboard events

Calls “onTextClick() function defined in main.js file

Main.js file (example) Specify the code to spin the text clockwise Taking 1500 milliseconds between 0 – 360 degrees It also displays the caption “GADGET_COPYRIGHT” in the expanded view Google Gadget in Google Desktop (undocked and docked view

Specify the code to spin the text clockwise

Taking 1500 milliseconds between 0 – 360 degrees

It also displays the caption “GADGET_COPYRIGHT” in the expanded view

Strings.xml file (example) Specify the metadata about the string Here “HELLO_WORLD” element contains the string “IU Research” which is displayed when the gadget is run in Google Desktop

Specify the metadata about the string

Here “HELLO_WORLD” element contains the string “IU Research” which is displayed when the gadget is run in Google Desktop

Social Bookmarking / Tagging Users save a list of internet resources They assign keywords or tags to each of these resources This method of categorization is also called as folksonomy Most bookmarking websites allow users to search for bookmarks on tags or keywords.

Users save a list of internet resources

They assign keywords or tags to each of these resources

This method of categorization is also called as folksonomy

Most bookmarking websites allow users to search for bookmarks on tags or keywords.

Advantages / Disadvantages Advantages You can get to your bookmarks from anywhere You can share your bookmarks with your friends, coworkers, supervisor etc. You can categorize or group/bundle your bookmarks according to your wish You can search of other users registered on that website and vice versa You also have the option to make your tags private Disadvantages No controlled vocabulary No standard for structure of tags e.g. capitalization, singular, plural etc. spelling mistakes in tags Tags having multiple meanings No hierarchical relationship Spamming – bookmarking same page multiple times

Advantages

You can get to your bookmarks from anywhere

You can share your bookmarks with your friends, coworkers, supervisor etc.

You can categorize or group/bundle your bookmarks according to your wish

You can search of other users registered on that website and vice versa

You also have the option to make your tags private

Disadvantages

No controlled vocabulary

No standard for structure of tags e.g. capitalization, singular, plural etc.

spelling mistakes in tags

Tags having multiple meanings

No hierarchical relationship

Spamming – bookmarking same page multiple times

Del.icio.us Store links to your favorite internet resources Share links / favorites with friends, family, coworkers, and the del.icio.us community. Discover new things. On del.icio.us, you can use tags to organize and remember your bookmarks, which is a much more flexible system than folders. You can bundle the tags into groups Example Uses Research : keeping track of your research materials Wish list : maintain a wish list Collaboration : friends, coworkers and other groups can use a shared account

Store links to your favorite internet resources

Share links / favorites with friends, family, coworkers, and the del.icio.us community.

Discover new things.

On del.icio.us, you can use tags to organize and remember your bookmarks, which is a much more flexible system than folders.

You can bundle the tags into groups

Example Uses

Research : keeping track of your research materials

Wish list : maintain a wish list

Collaboration : friends, coworkers and other groups can use a shared account

Ways to Use del.icio.us Web interface RSS Feeds Application Programming Interfaces (API) Embed JavaScript code inside your web page

Web interface

RSS Feeds

Application Programming Interfaces (API)

Embed JavaScript code inside your web page

Personal Bookmarks * Option to make bookmarks hidden Bookmarks of other users who used common tags * Option to add any user to your network Add users to your network and browse their tags * Option to disable sharing of your network Subscribe to interesting tags to be aggregated

I can subscribe to my own feeds and feeds from any other use registered on del.icio.us Group / Network Feed Individual Feed

I can subscribe to my own feeds and feeds from any other use registered on del.icio.us

Application Programming Interfaces All del.icio.us APIs are done over https and require HTTP-Auth Example https://api.del.icio.us/v1/tags/get Returns a list of tags and number of times used by a user. Output: XML Code <? require_once 'HTTP/Request.php'; require_once '/home/smaini/vals.php'; $req =& new HTTP_Request(&quot; https://api.del.icio.us/v1/tags/get &quot;); $req->setBasicAuth(delTagUser,delTagPass); $response = $req->sendRequest(); echo $req->getResponseBody(); > Output ->

All del.icio.us APIs are done over https and require HTTP-Auth

Example

https://api.del.icio.us/v1/tags/get

Returns a list of tags and number of times used by a user.

Output: XML

Code

<? require_once 'HTTP/Request.php'; require_once '/home/smaini/vals.php'; $req =& new HTTP_Request(&quot; https://api.del.icio.us/v1/tags/get &quot;); $req->setBasicAuth(delTagUser,delTagPass); $response = $req->sendRequest(); echo $req->getResponseBody();

>

API (continued) Update https://api.del.icio.us/v1/posts/update Returns the last update time for the user https://api.del.icio.us/v1/posts/all? Returns to check if the data has changed since last fetch Tags https://api.del.icio.us/v1/tags/rename?old=horse&new=horses Rename an existing tag with a new tag name Arguments required &old (required) - tag to rename. &new (required) - new name.

Update

https://api.del.icio.us/v1/posts/update

Returns the last update time for the user

https://api.del.icio.us/v1/posts/all?

Returns to check if the data has changed since last fetch

Tags

https://api.del.icio.us/v1/tags/rename?old=horse&new=horses

Rename an existing tag with a new tag name

Arguments required

&old (required) - tag to rename.

&new (required) - new name.

DELICIOUS API Posts https://api.del.icio.us/v1/posts/get ? https://api.del.icio.us/v1/posts/recent ? https://api.del.icio.us/v1/posts/all ? https://api.del.icio.us/v1/posts/dates ? https://api.del.icio.us/v1/posts/add ? https://api.del.icio.us/v1/posts/delete ? Bundles https://api.del.icio.us/v1/tags/bundles/all https://api.del.icio.us/v1/tags/bundles/set ? https://api.del.icio.us/v1/tags/bundles/delete ?

Posts

https://api.del.icio.us/v1/posts/get ?

https://api.del.icio.us/v1/posts/recent ?

https://api.del.icio.us/v1/posts/all ?

https://api.del.icio.us/v1/posts/dates ?

https://api.del.icio.us/v1/posts/add ?

https://api.del.icio.us/v1/posts/delete ?

Bundles

https://api.del.icio.us/v1/tags/bundles/all

https://api.del.icio.us/v1/tags/bundles/set ?

https://api.del.icio.us/v1/tags/bundles/delete ?

JavaScript Widget for Del.icio.us JavaScript can be embedded into your HTML code as a “Bookmarklet” This code can load a JavaScript Object that contains your latest set of tags <a href=&quot;javascript:location.href= 'http://del.icio.us/post?v=2&url='+encodeURIComponent(document.location.href)+' &title='+encodeURIComponent(document.title)+' '&quot;> Post to del.icio.us </a> Source: http://ekstreme.com/seo/socialbookmarkingcode.php

JavaScript can be embedded into your HTML code as a “Bookmarklet”

This code can load a JavaScript Object that contains your latest set of tags

Connotea Free online references management for scientists and clinicians One can save and organize references Step 1: Add the reference to Connotea’s library as a Bookmark (using browser button, add form or DOIs) Step 2: Tag the reference and type in the title Find users who used your tags Find Bookmarks matching your tags Entire library can be exported to the following formats: RIS: Suitable for importing into Reference Manager and similar software EndNote: Exporting to MS EndNote BibTex: For LATEX MODS: U.S. Library of Congress Metadata Object Description Schema (MODS) format RSS Feeds, RDF (Resource Description Framework) Can Import links / references using local file RIS, BibTeX, EndNote, MODS, ISI Web of knowledge, Firefox bookmarks

Free online references management for scientists and clinicians

One can save and organize references

Step 1: Add the reference to Connotea’s library as a Bookmark (using browser button, add form or DOIs)

Step 2: Tag the reference and type in the title

Find users who used your tags

Find Bookmarks matching your tags

Entire library can be exported to the following formats:

RIS: Suitable for importing into Reference Manager and similar software

EndNote: Exporting to MS EndNote

BibTex: For LATEX

MODS: U.S. Library of Congress Metadata Object Description Schema (MODS) format

RSS Feeds, RDF (Resource Description Framework)

Can Import links / references using local file

RIS, BibTeX, EndNote, MODS, ISI Web of knowledge, Firefox bookmarks

Automatic Collection of Bibliographic Information Connotea will add automatic bibliographic information for pages saved from the following sources Nature.com , PubMed , PubMed Central , Science PloS , BioMed Central , Supported Eprints repositories Supported Highwire Press publications Blackwell Synergy , Wiley Interscience , Scitation arXiv.org , Smithsonian/NASA Astrophysics Data system Amazon , HubMed , D-Lib Magazine

Connotea will add automatic bibliographic information for pages saved from the following sources

Nature.com , PubMed , PubMed Central , Science

PloS , BioMed Central , Supported Eprints repositories

Supported Highwire Press publications

Blackwell Synergy , Wiley Interscience , Scitation

arXiv.org , Smithsonian/NASA Astrophysics Data system

Amazon , HubMed , D-Lib Magazine

Web Interface 1) Find an interesting article to be tagged 4) This tags the Article of Interest in “My Library” 2) Click on “Add to Connotea” button in the browser 3) Type in the Display Title, Tags, Descriptions etc.

RSS Feeds Individual RSS Feed Group RSS Feed

Multiple Users and Tags Clicking around on user and tag names allows you to view the articles for one user or one tag But you can construct a URL for combining the tags using AND and OR operators To see a list of articles for the users fdr and jfk , construct the URL as: http://www.connotea.org/user/fdr/jfk This, in fact, filters for fdr OR jfk http://www.connotea.org/user/fdr+jfk A plus signs means AND, whereas a forward slash means OR.

Clicking around on user and tag names allows you to view the articles for one user or one tag

But you can construct a URL for combining the tags using AND and OR operators

To see a list of articles for the users fdr and jfk , construct the URL as: http://www.connotea.org/user/fdr/jfk

This, in fact, filters for fdr OR jfk

http://www.connotea.org/user/fdr+jfk

A plus signs means AND, whereas a forward slash means OR.

More Tag Searching Rules This works for tag names too, and you can combine user names, tag names, +'s and /'s in any combination. For example: http://www.connotea.org/user/fdr+hst/jfk+lbj/tag/topsecret/classified gives you a list of articles tagged as 'topsecret' or 'classified' by both fdr and hst , or by both jfk and lbj . After getting the results you have the option to export the list as any of the formats mentioned including RSS Feeds

This works for tag names too, and you can combine user names, tag names, +'s and /'s in any combination.

For example:

http://www.connotea.org/user/fdr+hst/jfk+lbj/tag/topsecret/classified

gives you a list of articles tagged as 'topsecret' or 'classified' by both fdr and hst , or by both jfk and lbj .

After getting the results you have the option to export the list as any of the formats mentioned including RSS Feeds

Programming Interface API Version 1 released wrapper libraries in Perl and Ruby URL Structure: http://www.connotea.org/data /bookmarks or /tags or '' (empty string, which means 'posts') /user/ [username] /tag/ [tagname] /date/ [date of form YYYY-MM-DD ] /uri/ [uri or hash] ? q= [free text search string] & num= [number of results per] & start= [result number to start at] All these are standard HTTP requests Use GET to retrieve the URL Output Format: RDF Format (Resource Descriptor Framework Format) Example: http://www.connotea.org/data/tags/user/sidds1601

API Version 1 released wrapper libraries in Perl and Ruby

URL Structure:

http://www.connotea.org/data

/bookmarks or /tags or '' (empty string, which means 'posts')

/user/ [username]

/tag/ [tagname]

/date/ [date of form YYYY-MM-DD ]

/uri/ [uri or hash]

? q= [free text search string]

& num= [number of results per]

& start= [result number to start at]

All these are standard HTTP requests

Use GET to retrieve the URL

Output Format: RDF Format (Resource Descriptor Framework Format)

Embedding Connotea JavaScript Widgets <a style=&quot;cursor:pointer;&quot; onclick=&quot;javascript: w=open('http://www.connotea.org/addpopup?'); <img src=&quot;images/connotea.png&quot; border=&quot;0“ alt=&quot;add bookmark to connotea&quot; align=&quot;absmiddle&quot;>Add to Connotea</a> Will display “Add to Connotea” icon in your webpage.

<a style=&quot;cursor:pointer;&quot; onclick=&quot;javascript: w=open('http://www.connotea.org/addpopup?'); <img src=&quot;images/connotea.png&quot; border=&quot;0“ alt=&quot;add bookmark to connotea&quot; align=&quot;absmiddle&quot;>Add to Connotea</a>

Will display “Add to Connotea” icon in your webpage.

CiteULike Purpose: To share, store, and organize the papers Provides “Bookmarklets” to extract information from current page Can manually post an article Can add URLs/DOIs and bibliographic metadata using its supported sites You can add tags to your own or other entries

Purpose: To share, store, and organize the papers

Provides “Bookmarklets” to extract information from current page

Can manually post an article

Can add URLs/DOIs and bibliographic metadata using its supported sites

You can add tags to your own or other entries

CiteULike It also provides extra bibliographic information from various databases It is NOT open source It can only import references from BibTex It can export reference list to: EndNote or BibTex format Supports Watch Lists: Page with papers that may be relevant to your field of study in the future. Note: you can watch a page only on one tag and not more than one. You only have the option to watch a page when you click on the active tags on the site.

It also provides extra bibliographic information from various databases

It is NOT open source

It can only import references from BibTex

It can export reference list to:

EndNote or

BibTex format

Supports Watch Lists: Page with papers that may be relevant to your field of study in the future.

Note: you can watch a page only on one tag and not more than one.

You only have the option to watch a page when you click on the active tags on the site.

Web Interface Click to save it as a reference

RSS Feeds Entire libraries can be exported as an RSS feed.

Inserting JavaScript Code <script type=&quot;text/javascript&quot; src=&quot;http://static.citeulike.org/button.js&quot;> </script> Citeulike icon in your Web Page

<script type=&quot;text/javascript&quot; src=&quot;http://static.citeulike.org/button.js&quot;> </script>

Similarities / Comparison Connotea CiteUlike Bookmarklets Yes Yes Export Formats RIS EndNote BibTex MODS RSS Feeds RDF EndNote: BibTex: Tag Sorting Order of Entry Alphabetically OpenSource Yes No

RIS

EndNote

BibTex

MODS

RSS Feeds

RDF

EndNote:

BibTex:

A short guide to REST-style Web Services.

Representational State Transfer REST is HTTP as a CS Ph. D. thesis. Roy Fielding, co-author of HTTP specification Standard Web Services have WSDL is an API language. SOAP is the network message envelop REST proposes to use Internet as programming platform with only HTTP. Use HTTP to ship machine process-able content, not just HTML. Simple (simplistic) but scales. Clients to REST services have one API for all occasions. HTTP GET, PUT, POST, DELETE Operations are performed on URLs. Very suitable for AJAX and JSON programming REST services are stateless (or idempotent). Identical requests give identical responses.

REST is HTTP as a CS Ph. D. thesis.

Roy Fielding, co-author of HTTP specification

Standard Web Services have

WSDL is an API language.

SOAP is the network message envelop

REST proposes to use Internet as programming platform with only HTTP.

Use HTTP to ship machine process-able content, not just HTML.

Simple (simplistic) but scales.

Clients to REST services have one API for all occasions.

HTTP GET, PUT, POST, DELETE

Operations are performed on URLs.

Very suitable for AJAX and JSON programming

REST services are stateless (or idempotent).

Identical requests give identical responses.

REST Services, Continued Content of URLs should be XML or similar encoded data (not just HTML). No universal message format like SOAP, but RSS and Atom are commonly used. You could use SOAP also. Real implication is that there are no SOAP headers No SOAP header processing Quality of REST services are what you get with HTTP and TCP/IP. No additional SOAP QOS layer No SOAP relay messaging, fault handling, RPC encoding, etc.

Content of URLs should be XML or similar encoded data (not just HTML).

No universal message format like SOAP, but RSS and Atom are commonly used.

You could use SOAP also.

Real implication is that there are no SOAP headers

No SOAP header processing

Quality of REST services are what you get with HTTP and TCP/IP.

No additional SOAP QOS layer

No SOAP relay messaging, fault handling, RPC encoding, etc.

An April Fools Critique of REST REST tends to attract passionate religious debates Sanjiva Weerawarana sees the light: http://www.bloglines.com/blog/sanjiva?id=196 Weerarana is co-author of WSDL specification, project leader of IBM Web Service efforts, Apache Axis 2, CEO of WSO2 See also his more serious comments at http://www.infoq.com/articles/sanjiva-rest-myths echo “ Groundskeeper Willie : It won't last. Brothers and sisters are natural enemies. Like Englishmen and Scots! Or Welshmen and Scots! Or Japanese and Scots! Or Scots and other Scots! Damn Scots! They ruined Scotland! Principal Skinner : You Scots sure are a contentious people. Groundskeeper Willie : You just made an enemy for life!” | sed “s/Scots/RESTifarians/”

REST tends to attract passionate religious debates

Sanjiva Weerawarana sees the light:

http://www.bloglines.com/blog/sanjiva?id=196

Weerarana is co-author of WSDL specification, project leader of IBM Web Service efforts, Apache Axis 2, CEO of WSO2

See also his more serious comments at

http://www.infoq.com/articles/sanjiva-rest-myths

We examine Amazon’s Simple Storage System as a REST case study.

S3 issues two codes to each account. An account access key: your identity Shared secret key: used to digitally sign communications In each HTTP request, you have to add an Authorization field. It will use the account access key and a “Signature” which is a HMAC-SHA1 hash of the request (sans “Authorization” line) using the secret access key as the key. Authorization: AWS 1ATXQ3HHA59CYF1CVS02:SZf1cHmQ/nrZbsrC13hCZS061yw= “ Authorization: AWS “+ AWSAccessKeyID + “:” + Signature The authorization line is formed like so: An example :

S3 issues two codes to each account.

An account access key: your identity

Shared secret key: used to digitally sign communications

In each HTTP request, you have to add an Authorization field.

It will use the account access key and a “Signature” which is a HMAC-SHA1 hash of the request (sans “Authorization” line) using the secret access key as the key.

Buckets: Grouping Your Files Objects (stored files) are stored in buckets. An account can have multiple buckets. These bucket names are not user specific. In other words, if aS3 user is already using a desired bucket name, that name is unavailable for everyone else. This bucket name will be used in the url for your resources. An example would be : http://s3.amazonaws.com/bucket_name/sample.jpeg

Objects (stored files) are stored in buckets.

An account can have multiple buckets.

These bucket names are not user specific.

In other words, if aS3 user is already using a desired bucket name, that name is unavailable for everyone else.

This bucket name will be used in the url for your resources. An example would be :

http://s3.amazonaws.com/bucket_name/sample.jpeg

Buckets (cont’d) Buckets are created with an http PUT formed like this : PUT /[bucket-name] HTTP/1.0 Date: Wed, 08 Mar 2006 04:06:15 GMT Authorization: AWS [aws-access-key-id]:[header-signature] Host: s3.amazonaws.com If properly formed it would return a response of HTTP/1.1 200 OK x-amz-id-2: VjzdTviQorQtSjcgLshzCZSzN+7CnewvHA+6sNxR3VRcUPyO5fmSmo8bWnIS52qa x-amz-request-id: 91A8CC60F9FC49E7 Date: Wed, 08 Mar 2006 04:06:15 GMT Location: /[bucket-name] Content-Length: 0 Connection: keep-alive Server: AmazonS3

Objects: Stored Files There is more to these objects than the content of the file. Metadata can be included with each object. Name/value pair collections The objects must have unique names (keys) in regards to their own bucket. In other words, “s3.txt” can exist in multiple buckets, but only once in a single bucket. There are no “sub-buckets” so many programmers decide to group files by prefixing. For instance, all pictures would start with “Pictures.” This works well with the “list” operation.

There is more to these objects than the content of the file.

Metadata can be included with each object.

Name/value pair collections

The objects must have unique names (keys) in regards to their own bucket.

In other words, “s3.txt” can exist in multiple buckets, but only once in a single bucket.

There are no “sub-buckets” so many programmers decide to group files by prefixing. For instance, all pictures would start with “Pictures.”

This works well with the “list” operation.

Replacing/Overwriting Objects If a file is uploaded that has a key that already exists, that file is then replaced. This queue is based on when the file completes upload. So if one user starts to upload a large file to foo.bar and another one starts a much smaller file to that same key, even thought the smaller one started last, it is quite possible the larger one will overwrite the smaller one when it finishes. The firs S stands for “simple”

If a file is uploaded that has a key that already exists, that file is then replaced.

This queue is based on when the file completes upload.

So if one user starts to upload a large file to foo.bar and another one starts a much smaller file to that same key, even thought the smaller one started last, it is quite possible the larger one will overwrite the smaller one when it finishes.

The firs S stands for “simple”

PUT /[bucket-name]/[key-name] HTTP/1.0 Date: Wed, 08 Mar 2006 04:06:16 GMT Authorization: AWS [aws-access-key-id]:[header-signature] Host: s3.amazonaws.com Content-Length: 14 x-amz-meta-title: my title Content-Type: text/plain this is a test The HTTP request to upload a file will look like this: This will give the following response: HTTP/1.1 200 OK x-amz-id-2: wc15E1LUrjDZhNtT4QZtsbtadnOMKGjw5QTxkRDVO1owwbA6YoiqJJEuKShopufw x-amz-request-id: 7487CD42C5CA7524 Date: Wed, 08 Mar 2006 04:06:16 GMT ETag: &quot;54b0c58c7ce9f2a8b551351102ee0938&quot; Content-Length: 0 Connection: keep-alive Server: AmazonS3

File Permissions There are extensive rules to read and write access to objects and buckets. These rights are stored in an ACL (access control list), which is an XML document. Rights can be granted to users on a one to one basis, or to pre-defined groups.

There are extensive rules to read and write access to objects and buckets.

These rights are stored in an ACL (access control list), which is an XML document.

Rights can be granted to users on a one to one basis, or to pre-defined groups.

READ: For a bucket, allows listing of the objects in that bucket. For an object, allows reading of data and/or metadata WRITE: For a bucket, allows the creation and deletion of all new and existing objects in this bucket. There is no support or WRITE on an object. READ_ACP: Allows the reading of a bucket or object’s ACL. WRITE_ACP: Allows the changing of a bucket or object’s ACL. FULL_CONTROL: Grants all of the above permissions. No other rights are added with this type.

READ: For a bucket, allows listing of the objects in that bucket. For an object, allows reading of data and/or metadata

WRITE: For a bucket, allows the creation and deletion of all new and existing objects in this bucket. There is no support or WRITE on an object.

READ_ACP: Allows the reading of a bucket or object’s ACL.

WRITE_ACP: Allows the changing of a bucket or object’s ACL.

FULL_CONTROL: Grants all of the above permissions. No other rights are added with this type.

Permissions (Grantee Types) User : Has to be a user of S3. Can be identified either by e-mail address or by an id supplied by Amazon (canonical). Owner : Always has full rights and is always the creator of the object. Group : Currently there are only two groups: all users and authenticated users Rights given by these groups do not overwrite other access control considerations. http://acs.amazonaws.com/grouops/global/AllUsers: Represents everyone, anonymous or authenticated. http://acs.amazonaws.com/groups/global/AuthenticatedUsers: Represents non-anonymous users.

User : Has to be a user of S3.

Can be identified either by e-mail address or by an id supplied by Amazon (canonical).

Owner : Always has full rights and is always the creator of the object.

Group : Currently there are only two groups: all users and authenticated users

Rights given by these groups do not overwrite other access control considerations.

http://acs.amazonaws.com/grouops/global/AllUsers: Represents everyone, anonymous or authenticated.

http://acs.amazonaws.com/groups/global/AuthenticatedUsers: Represents non-anonymous users.

<AccessControlPolicy> <Owner> <ID>a9a7b886d6fd24a52fe8ca5bef65f89a64e0193f23000e241bf9b1c61be666e9</ID> <DisplayName>chriscustomer</DisplayName> </Owner> <AccessControlList> <Grant> <Grantee xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:type=&quot;CanonicalUser&quot;> <ID>a9a7b886d6fd24a52fe8ca5bef65f89a64e0193f23000e241bf9b1c61be666e9</ID> <DisplayName>chriscustomer</DisplayName> </Grantee> <Permission>FULL_CONTROL</Permission> </Grant> <Grant> <Grantee xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:type=&quot;Group&quot;> <URI>http://acs.amazonaws.com/groups/global/AllUsers<URI> </Grantee> <Permission>READ</Permission> </Grant> </AccessControlList> </AccessControlPolicy> Single User Entry Group Entry Owner

How to Use S3 With PHP programming examples

Define Constants When a new account is created, it will have a key and “secret code” attached to it. These should be placed in a separate file and be defined as constants. For these purposes, they will be known as ‘amazonKey’ and ‘amazonSecret’, respectively. define (“amazonKey”,”15B4D3491F177624206A”); define (“amazonSecret”,”(secret code given by S3)”); define (“amazonURL”,”http://s3.amazonaws.com/” ); define (“amazonBucket”,”BucketName”);

When a new account is created, it will have a key and “secret code” attached to it.

These should be placed in a separate file and be defined as constants.

For these purposes, they will be known as ‘amazonKey’ and ‘amazonSecret’, respectively.

$ pear install HTTP_Request $ pear install Crypt_HMAC require_once ‘Crypt/HMAC.php’; require_once ‘HTTP/Request.php’; S3 requires the use of HTTP Requests and RFC 2104 compliant hashes. Luckily, the Pear framework (which comes with PHP) has made packages for these purposes. Before using these packages, they must be added to PHP. Simply run these commands (pear is found in /bin under the /php directory). Any php script that will use these packages must include these two lines.

function hex2b64($str) { $raw = ''; for ($i=0; $i < strlen($str); $i+=2) { $raw .= chr(hexdec(substr($str, $i, 2))); } return base64_encode($raw); } function constructSig($str) { $hasher =& new Crypt_HMAC(amazonSecret, &quot;sha1&quot;); $signature = hex2b64($hasher->hash($str)); return($signature); } Two functions will need to be created to facilitate the use of S3. Converts a string from hex to base 64 Constructs the “Signature” using the secret key to hash the given string and encode it

function createBucket($bucket, $acl = 'private') { $httpDate = gmdate(&quot;D, d M Y G:i:s T&quot;); echo $httpDate; $stringToSign = &quot;PUT
$httpDate
x-amz-acl:$acl
/$bucket&quot;; $signature = constructSig($stringToSign); $req =& new HTTP_Request(amazonUrl . $bucket); $req->setMethod(&quot;PUT&quot;); $req->addHeader(&quot;Date&quot;, $httpDate); $req->addHeader(&quot;Authorization&quot;, &quot;AWS &quot; . amazonKey. &quot;:&quot; . $signature); $req->addHeader(&quot;x-amz-acl&quot;, $acl); $response = $req->sendRequest(); $responseCode=$req->getResponseCode(); if ($responseCode == 200) { return true; } else { return false; } } This section constructs the signature This section constructs the headers, and creates the signature Send the request and return whether or not it was successful

createBucket(amazonBucket); Once that function is created, it’s pretty simple to create a bucket. It is usually more desirable to keep the ACL private, so we’ll keep that blank. The objects under it can still be made publicly readable, which allows browser access This prevents others from searching the directory, and adding objects of their own. PUT / BucketName HTTP/1.0 Content-Length: 0 Authorization: AWS 15B4D3461F177624206A:YFhSWKDg3qDnGbV7JCnkfdz/IHY= Date: Thu, 17 Nov 2005 02:40:52 GMT So in this instance, running this line (see previous slide): should create an HTTP request looking like :

Once that function is created, it’s pretty simple to create a bucket.

It is usually more desirable to keep the ACL private, so we’ll keep that blank.

The objects under it can still be made publicly readable, which allows browser access

This prevents others from searching the directory, and adding objects of their own.

function putObject($bucket, $key, $filePath, $contentType, $contentLength, $acl, $metadataArray=array(), $md5=&quot;&quot;){ sort($metadataArray); $resource = &quot;$bucket/$key&quot;; $resource = urlencode($resource); $req = & new HTTP_Request($this->serviceUrl.$resource); $req->setMethod(&quot;PUT&quot;); $httpDate = gmdate(&quot;D, d M Y G:i:s T&quot;); $req->addHeader(&quot;Date&quot;, $httpDate); $req->addHeader(&quot;Content-Type&quot;, $contentType); $req->addHeader(&quot;Content-Length&quot;, $contentLength); $req->addHeader(&quot;x-amz-acl&quot;, $acl); if($md5){ $MD5 = $this->hex2b64(md5_file($filePath)); $req->addHeader(&quot;Content-MD5&quot;, $MD5); } $req->setBody(file_get_contents($filePath)); $stringToSign=&quot;PUT
$MD5
$contentType
$httpDate
x-amz-acl:$acl
&quot;; foreach($metadataArray as $current){ if($current!=&quot;&quot;){ $stringToSign.=&quot;x-amz-meta-$current
&quot;; $header = substr($current,0,strpos($current,':')); $meta = substr($current,strpos($current,':')+1,strlen($current)); $req->addHeader(&quot;x-amz-meta-$header&quot;, $meta); } } $stringToSign.=&quot;/$resource&quot;; $signature = $this->constructSig($stringToSign); $req->addHeader(&quot;Authorization&quot;, &quot;AWS &quot; . $this->accessKeyId . &quot;:&quot; . $signature); $response = $req->sendRequest(); $responseCode = $req->getResponseCode(); if (responseCode == 200) { return true; } else { echo $req->getResponseBody(); return false; } } Prepare the request Add the necessary Headers Includes an md5 if specified Creates the signature, with metadata Add the contents of the file to the body of the request Send the request and return the response

putObject (amazonBucket, $_FILES[‘upFile’][‘name’], $_FILES[‘upFile’][‘tmp_name’], $_FILES[‘upFile’][‘type’], filesize($_FILES[‘upFile’][‘tmp_name’]), ‘public_read’); In this instance, a file is being uploaded that is simply called “Message”. This is a simple text file with the contents “Paper or Plastic”. PUT /BucketName/Neo HTTP/1.0 Content-Length: 16 Authorization: AWS 15B4D3461F177624206A:xQE0diMbLRepdf3YB+FIc8F2Cy8= Date: Thu, 17 Nov 2005 07:48:33 GMT Content-Type: text/plain Paper or Plastic This will produce the HTTP request seen here : Which will upload this file to the S3 server which can be accessed either by the REST service or directly by accessing the link: http://s3.amazonaws.com/BucketName/Neo

A brief overview of news feeds, how to create, and how to consume.

Atomsphere An Atom feed library written in Java http://www.colorfulsoftware.com/projects/atomsphere Download packages atomsphere atomsphere-taglib atomsphere-webapp atomsphere-weblib Add jar files included in the packages above to the project

An Atom feed library written in Java

http://www.colorfulsoftware.com/projects/atomsphere

Download packages

atomsphere

atomsphere-taglib

atomsphere-webapp

atomsphere-weblib

Add jar files included in the packages above to the project

Create Atom Feed for Bay1Temp Create an atom feed document add attribute “xmlns” to be “ http://www.w3.org/2005/Atom ” to the feed add elements “Author”, “Id”, “Title”, “Link” , “Updated” Add an entry document to the feed add elements “Author”, “Id”, “Title”, “Updated” add element “Content” which contains parameters’ value of Bay1Temp

Create an atom feed document

add attribute “xmlns” to be “ http://www.w3.org/2005/Atom ” to the feed

add elements “Author”, “Id”, “Title”, “Link” , “Updated”

Add an entry document to the feed

add elements “Author”, “Id”, “Title”, “Updated”

add element “Content” which contains parameters’ value of Bay1Temp

Java Code for creating an atom feed doc // New a feed Feed theFeed = new Feed(); // Add &quot;xmlns&quot; attribute to the feed theFeed.addAttribute(new Attribute(&quot;xmlns&quot;,&quot;http://www.w3.org/2005/Atom&quot;)); // Add Author theFeed.addAuthor(new Author(&quot;Yu(Carol) Deng&quot;)); // Set a universally unique Id for the feed theFeed.setId(new Id(&quot;urn:uuid:&quot; + new UID().toString())); // Add Title Title feedTitle = new Title(&quot;text&quot;); // Set title type for the feed feedTitle.setText(&quot;Bay1Temp Atom Feed&quot;); // Set title content theFeed.setTitle(feedTitle); // Set the title // Add Link Link feedLink = new Link(); // New a Link in the feed feedLink.setRel(new Attribute(&quot;rel&quot;, &quot;self&quot;)); //Set &quot;rel&quot; attribute of the link feedLink.setType(new Attribute(&quot;type&quot;, &quot;application/atom+xml&quot;)); //Set &quot;type&quot; attribute of the link feedLink.setHref(new Attribute(&quot;href&quot;, FeedHref)); //Set &quot;href&quot; attribute of the link theFeed.addLink(feedLink); // Set Updated to the entry the Feed.setUpdated(new Updated(new Date()));

// New a feed

Feed theFeed = new Feed();

// Add &quot;xmlns&quot; attribute to the feed

theFeed.addAttribute(new Attribute(&quot;xmlns&quot;,&quot;http://www.w3.org/2005/Atom&quot;));

// Add Author

theFeed.addAuthor(new Author(&quot;Yu(Carol) Deng&quot;));

// Set a universally unique Id for the feed

theFeed.setId(new Id(&quot;urn:uuid:&quot; + new UID().toString()));

// Add Title

Title feedTitle = new Title(&quot;text&quot;); // Set title type for the feed

feedTitle.setText(&quot;Bay1Temp Atom Feed&quot;); // Set title content

theFeed.setTitle(feedTitle); // Set the title

// Add Link

Link feedLink = new Link(); // New a Link in the feed

feedLink.setRel(new Attribute(&quot;rel&quot;, &quot;self&quot;)); //Set &quot;rel&quot; attribute of the link

feedLink.setType(new Attribute(&quot;type&quot;, &quot;application/atom+xml&quot;)); //Set &quot;type&quot; attribute of the link

feedLink.setHref(new Attribute(&quot;href&quot;, FeedHref)); //Set &quot;href&quot; attribute of the link

theFeed.addLink(feedLink);

// Set Updated to the entry

the Feed.setUpdated(new Updated(new Date()));

Code for adding an entry doc to feed // New an Entry parcelEntry = new Entry(); // Add Author parcelEntry.addAuthor(new Author(&quot;Yu(Carol) Deng&quot;)); // Add Title Title parcelTitle = new Title(&quot;text&quot;); // Set title type for the feed parcelTitle.setText(&quot;SensorName, TimeStamp, DoubleData&quot;); // Set title content parcelEntry.setTitle(parcelTitle); // Set the title // Set a universally unique Id for the entry parcelEntry.setId(new Id(&quot;urn:uuid:&quot; + new UID().toString())); // Set Updated to the entry Calendar cal = new GregorianCalendar(); parcelEntry.setUpdated(new Updated(cal.getTime())); // Set the current data to the Content parcelEntry.setContent(nodeSensorName + nodeTimeStamp + nodeDoubleData); // Add the Entry to the feed currentFeed.addEntry(parcelEntry);

// New an Entry

parcelEntry = new Entry();

// Add Author

parcelEntry.addAuthor(new Author(&quot;Yu(Carol) Deng&quot;));

// Add Title

Title parcelTitle = new Title(&quot;text&quot;); // Set title type for the feed

parcelTitle.setText(&quot;SensorName, TimeStamp, DoubleData&quot;); // Set title content

parcelEntry.setTitle(parcelTitle); // Set the title

// Set a universally unique Id for the entry

parcelEntry.setId(new Id(&quot;urn:uuid:&quot; + new UID().toString()));

// Set Updated to the entry

Calendar cal = new GregorianCalendar();

parcelEntry.setUpdated(new Updated(cal.getTime()));

// Set the current data to the Content

parcelEntry.setContent(nodeSensorName + nodeTimeStamp + nodeDoubleData);

// Add the Entry to the feed

currentFeed.addEntry(parcelEntry);

Atom Feed for Bay1Temp <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?> <feed xmlns=&quot; http://www.w3.org/2005/Atom &quot;> <id> urn:uuid:29fefa08:112967cfbb9:-8000 </id> <updated> 2007-05-16T16:07:16.376-05:00 </updated> <title type=&quot; text &quot;> Bay1Temp Atom Feed </title> <author> <name> Yu(Carol) Deng </name> </author> <link rel=&quot; self &quot; type=&quot; application/atom+xml &quot; href=&quot; http://hagar.cs.indiana.edu:8181/foo.xml &quot; /> <entry> <id> urn:uuid:29fefa08:112967cfbb9:-7fff </id> <updated> 2007-05-16T16:03:32.423-05:00 </updated> <title type=&quot; text &quot;> SensorName, TimeStamp, DoubleData </title> <author> <name> Yu(Carol) Deng </name> </author> <content type=&quot; html &quot;> Bay1Temp 2007-05-16 20:06:35Z 25.2<br>Bay1Temp 2007-05-16 20:06:55Z 25.1<br>Bay1Temp 2007-05-16 20:07:15Z 25.1 </content> </entry> </feed>

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?>

<feed xmlns=&quot; http://www.w3.org/2005/Atom &quot;>

<id> urn:uuid:29fefa08:112967cfbb9:-8000 </id>

<updated> 2007-05-16T16:07:16.376-05:00 </updated>

<title type=&quot; text &quot;> Bay1Temp Atom Feed </title>

<author>

<name> Yu(Carol) Deng </name>

</author>

<link rel=&quot; self &quot; type=&quot; application/atom+xml &quot; href=&quot; http://hagar.cs.indiana.edu:8181/foo.xml &quot; />

<entry>

<id> urn:uuid:29fefa08:112967cfbb9:-7fff </id>

<updated> 2007-05-16T16:03:32.423-05:00 </updated>

<title type=&quot; text &quot;> SensorName, TimeStamp, DoubleData </title>

<author>

<name> Yu(Carol) Deng </name>

</author>

<content type=&quot; html &quot;> Bay1Temp 2007-05-16 20:06:35Z 25.2<br>Bay1Temp 2007-05-16 20:06:55Z 25.1<br>Bay1Temp 2007-05-16 20:07:15Z 25.1 </content>

</entry>

</feed>

Bay1Temp Atom Feed in iGoogle

Making Your Own Feed Consumer There are plenty of libraries for consuming feeds that you can embed in your own Web pages, blogs, wikis, etc. I looked at two for PHP: Magpie RSS: wasted an afternoon trying to get this to work. SimplePie: worked in 5 minutes. We’ll look at SimplePie for MediaWiki

There are plenty of libraries for consuming feeds that you can embed in your own Web pages, blogs, wikis, etc.

I looked at two for PHP:

Magpie RSS: wasted an afternoon trying to get this to work.

SimplePie: worked in 5 minutes.

We’ll look at SimplePie for MediaWiki

Adding SimplePie to MediaWiki, Part I These steps require access to MediaWiki’s directories under Apache Download SimplePie and put the simplepie.inc file in your MediaWiki’s “extensions” folder. Download the MediaWiki plugin and put it (simple_pie.php) in your extensions folder also. Edit LocalSettings.php to add the line include(&quot;./extensions/simplepie_mediawiki.php&quot;); Next steps can be done by anyone.

These steps require access to MediaWiki’s directories under Apache

Download SimplePie and put the simplepie.inc file in your MediaWiki’s “extensions” folder.

Download the MediaWiki plugin and put it (simple_pie.php) in your extensions folder also.

Edit LocalSettings.php to add the line

include(&quot;./extensions/simplepie_mediawiki.php&quot;);

Next steps can be done by anyone.

Adding a Feed, Part II To show just dates and titles, do this: <feed showdesc=&quot;false&quot; showdate=&quot;true&quot;> ... </feed> In the text area, add a line like <feed> http://myblog.host.org/rss/ </feed> Let’s say you want to add your blog’s RSS feed to your team’s wiki. Create a new Wiki page and edit it. Part of the art of a wiki...

To show just dates and titles, do this:

<feed showdesc=&quot;false&quot; showdate=&quot;true&quot;>

...

</feed>

In the text area, add a line like

<feed>

http://myblog.host.org/rss/

</feed>

Let’s say you want to add your blog’s RSS feed to your team’s wiki.

Create a new Wiki page and edit it.

Part of the art of a wiki...

Use blog to create posts. Display blog RSS feed in MediaWiki.

Aggregating the Rich Internet Experiences and other buzz phrases

What Is a Portal? Traditionally, a portal is personalized Web page that recognizes you. You have to log in and set cookies. You get customized content and layouts. Typically newsfeeds but this is also a good model for science gateways. Portals have a component model. Collections of components are managed by a portal container. Enterprise portals are based on standards like JSR 168 (Java) Web Services for Remote Portlets (WSRP) Web 2.0 equivalent is called a Start Page.

Traditionally, a portal is personalized Web page that recognizes you.

You have to log in and set cookies.

You get customized content and layouts.

Typically newsfeeds but this is also a good model for science gateways.

Portals have a component model. Collections of components are managed by a portal container.

Enterprise portals are based on standards like

JSR 168 (Java)

Web Services for Remote Portlets (WSRP)

Web 2.0 equivalent is called a Start Page.

Science Portals Science Portals are often built using portlet components. Ex: TeraGrid Science Gateways Portlets are a server side technology. Can be built with enterprise technologies like JSF. Users can select from available portlets and customize their layouts.

Science Portals are often built using portlet components.

Ex: TeraGrid Science Gateways

Portlets are a server side technology.

Can be built with enterprise technologies like JSF.

Users can select from available portlets and customize their layouts.

Web 2.0 Challenges for Science Portals Client-side integration of components from multiple service providers. Start Pages do this all the time with widget “ecosystems” Multiple views of the same Web application. Consider del.icio.us: Browser, JSON, REST/XML, JavaScript Widget interfaces all to the same application. You don’t have to go to http://del. icio .us to use it. Simple programming interfaces that encourage “do it yourself” science mash-ups. JSON, AJAX compatible REST APIs. Widgets/gadgets that allow portal capabilities to be exported to other Web sites and start pages. Easily add stuff like Digg, YouTube, MySpaces, etc.

Client-side integration of components from multiple service providers.

Start Pages do this all the time with widget “ecosystems”

Multiple views of the same Web application.

Consider del.icio.us: Browser, JSON, REST/XML, JavaScript Widget interfaces all to the same application.

You don’t have to go to http://del. icio .us to use it.

Simple programming interfaces that encourage “do it yourself” science mash-ups.

JSON, AJAX compatible REST APIs.

Widgets/gadgets that allow portal capabilities to be exported to other Web sites and start pages.

Easily add stuff like Digg, YouTube, MySpaces, etc.

Google Gadgets Netvibes Widgets

Integrate content from anywhere. Content is under complete control of user. Universal widget modules with supporting JavaScript libraries. Any standalone HTML application can be converted into a widget/gadget. Javascript expertise needed to make sophisticated widgets. Gadgets are easily created, published and shared. Anyone can write a gadget. Gadgets can be anywhere on the Web Netvibes ecosystem But you don’t have access to Netvibes or Google container source code. Downloadable Start Page containers? Containers only show content deployed on the portal server. Users can only choose from portlets deployed in the container. Portlets have Java programming API. Requires expertise in Java web programming (JSP, JSF, Struts, etc). Portlets must be deployed on the server that runs the portal container. Only the portal administrator can add a new portlet No way to share running JSR 168 portlets between portal containers. WSRP is supposed to solve this. Iframes are more practical But the portal administrators have complete control over the container and content. You download and run everything on your server. Start Pages, Gadgets Portals, Portlets

Integrate content from anywhere.

Content is under complete control of user.

Universal widget modules with supporting JavaScript libraries.

Any standalone HTML application can be converted into a widget/gadget.

Javascript expertise needed to make sophisticated widgets.

Gadgets are easily created, published and shared.

Anyone can write a gadget.

Gadgets can be anywhere on the Web

Netvibes ecosystem

But you don’t have access to Netvibes or Google container source code.

Downloadable Start Page containers?

Containers only show content deployed on the portal server.

Users can only choose from portlets deployed in the container.

Portlets have Java programming API.

Requires expertise in Java web programming (JSP, JSF, Struts, etc).

Portlets must be deployed on the server that runs the portal container.

Only the portal administrator can add a new portlet

No way to share running JSR 168 portlets between portal containers.

WSRP is supposed to solve this.

Iframes are more practical

But the portal administrators have complete control over the container and content.

You download and run everything on your server.

Writing a Google Gadget We first create a simple XML description for the gadget and place in a URL. For example, content of the gadget descriptor located will be located at http://hostname:8080/gridsphere/ogcegadget.html

We first create a simple XML description for the gadget and place in a URL.

For example, content of the gadget descriptor located will be located at http://hostname:8080/gridsphere/ogcegadget.html

Gadget XML Description Content of ogcegadget.html is <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;OGCE Portal&quot; /> <Content type=&quot;url&quot; href=&quot;http://hostname:8080/gridsphere/ogce1.html&quot; /> </Module>

Content of ogcegadget.html is

<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>

<Module> <ModulePrefs title=&quot;OGCE Portal&quot; /> <Content type=&quot;url&quot; href=&quot;http://hostname:8080/gridsphere/ogce1.html&quot; />

</Module>

Add it to your iGoogle page in the usual fashion (click “Add Stuff”). Gadget shows up in your layout.

Writing a Netvibes Widget Basic steps are as follows: Write an HTML page. Decorate with Netvibes metatags (required). Use Netvibes CSS style sheets (optional) Use Netvibes JavaScript libraries (optional) Add to your Netvibes content.

Basic steps are as follows:

Write an HTML page.

Decorate with Netvibes metatags (required).

Use Netvibes CSS style sheets (optional)

Use Netvibes JavaScript libraries (optional)

Add to your Netvibes content.

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta name=&quot;author&quot; content=&quot;Huapeng Yuan&quot; /> <meta name=&quot;description&quot; content=&quot;A Netvibes Widget for OGCE&quot; /> <meta name=&quot;apiVersion&quot; content=&quot;1.0&quot; /> <meta name=&quot;inline&quot; content=&quot;true&quot; /> <meta name=&quot;debugMode&quot; content=&quot;false&quot; /> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://www.netvibes.com/themes/uwa/style.css&quot; /> <script type=&quot;text/javascript&quot; src=&quot;http://www.netvibes.com/js/UWA/load.js.php?env=Standalone&quot;> </script> <title>OGCE Portal</title> <link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;http://www.netvibes.com/favicon.ico&quot; /> </head> <!—Begin HTML web form --> <body></body> Add required Netvibes meta tags. Use Netvibes style sheets. Import netvibes JavaScript

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>

<html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>

<head>

<meta name=&quot;author&quot; content=&quot;Huapeng Yuan&quot; />

<meta name=&quot;description&quot; content=&quot;A Netvibes Widget for OGCE&quot; />

<meta name=&quot;apiVersion&quot; content=&quot;1.0&quot; />

<meta name=&quot;inline&quot; content=&quot;true&quot; />

<meta name=&quot;debugMode&quot; content=&quot;false&quot; />

<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://www.netvibes.com/themes/uwa/style.css&quot; />

<script type=&quot;text/javascript&quot; src=&quot;http://www.netvibes.com/js/UWA/load.js.php?env=Standalone&quot;> </script>

<title>OGCE Portal</title>

<link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;http://www.netvibes.com/favicon.ico&quot; />

</head>

<!—Begin HTML web form -->

<body></body>

Building Better Netvibes Widgets The previous example was for a minimal widget. Only HTML Netvibes JavaScript libraries let you do the following: “ widget” object: replaces JS document and window. Sandboxes the widget from other widgets in the same page. “ el” object: allows you to manipulate HTML in the widget. AJAX utility methods: UWA.Data.{getFeed(), getXML(), getJson(), getText(), request()} You need these to process results inline (i.e. not redirect away to a new page as a result of a form action).

The previous example was for a minimal widget.

Only HTML

Netvibes JavaScript libraries let you do the following:

“ widget” object: replaces JS document and window.

Sandboxes the widget from other widgets in the same page.

“ el” object: allows you to manipulate HTML in the widget.

AJAX utility methods: UWA.Data.{getFeed(), getXML(), getJson(), getText(), request()}

You need these to process results inline (i.e. not redirect away to a new page as a result of a form action).

I want to say just one word to you. Just one word. Are you listening? Microformats.

Microformats Microformats, like Ajax, follow a technical methodology. Not a new technology. Main Idea: Use existing XHTML extension mechanisms to create tag sets the represent data objects. <div> and <span> tags Use community conventions to drive adoption of specific formats. Stay away from hard problems that have bogged down the Semantic Web. Logics, inference, and artificial intelligence.

Microformats, like Ajax, follow a technical methodology.

Not a new technology.

Main Idea: Use existing XHTML extension mechanisms to create tag sets the represent data objects.

<div> and <span> tags

Use community conventions to drive adoption of specific formats.

Stay away from hard problems that have bogged down the Semantic Web.

Logics, inference, and artificial intelligence.

An Example: A Fault Note this is just HTML. Note we have used custom tags to encode data meaning and not data formatting. CSS style sheets would be used to format the display. <div class=”earthquake.fault”> <div class=”faultName”> Northridge </div> <div class=”latStart>…</div> <div class=”lonStart>…</div> <div class=”latEnd”>…</div> <div class=”lonEnd”>…</div> <div class=”strike”></div> <div class=”dip”>…</div> </div>

Note this is just HTML.

Note we have used custom tags to encode data meaning and not data formatting.

CSS style sheets would be used to format the display.

<div class=”earthquake.fault”>

<div class=”faultName”>

Northridge

</div>

<div class=”latStart>…</div>

<div class=”lonStart>…</div>

<div class=”latEnd”>…</div>

<div class=”lonEnd”>…</div>

<div class=”strike”></div>

<div class=”dip”>…</div>

</div>

Other Examples People: hCard: the Microformat version of the IETF standard vCard. Dates: hCalendar: the Microformat version of IETF standard iCalendar. Both of these characterized by sets of name/value pair conventions Dublin Core publication metadata is another potential application. Unlike Semantic Web, no way to express inter-format relationships.

People:

hCard: the Microformat version of the IETF standard vCard.

Dates:

hCalendar: the Microformat version of IETF standard iCalendar.

Both of these characterized by sets of name/value pair conventions

Dublin Core publication metadata is another potential application.

Unlike Semantic Web, no way to express inter-format relationships.

vCard-->hCard BEGIN:VCARD VERSION:3.0 N:Çelik;Tantek FN:Tantek Çelik URL:http://tantek.com/ ORG:Technorati END:VCARD <div class=&quot;vcard&quot;> <a class=&quot;url fn&quot; href=&quot;http://tantek.com/&quot;> Tantek Çelik </a> <div class=&quot;org&quot;> Technorati </div> </div> http://microformats.org/wiki/hcard

BEGIN:VCARD

VERSION:3.0

N:Çelik;Tantek

FN:Tantek Çelik

URL:http://tantek.com/

ORG:Technorati

END:VCARD

<div class=&quot;vcard&quot;>

<a class=&quot;url fn&quot; href=&quot;http://tantek.com/&quot;>

Tantek Çelik

</a>

<div class=&quot;org&quot;>

Technorati

</div>

</div>

Should You Care? Microformats’ value really only appears when they are adopted as regular conventions. JavaScript libraries and related browser tool support. Both Firefox 3 and IE 8 may support some standard microformats. Ex: automatically detect hCard and hCalendar. Allow these to be exported to your favorite address book and calendar application automatically. Our fault microformat may be associated with a Google Map or an HTML form interface generator, for example. Nifty hcard/hcalendar demo: http://spaces.live.com/editorial/rayozzie/demo/liveclip/liveclipsample/clipboardexample.html View source when you are done playing.

Microformats’ value really only appears when they are adopted as regular conventions.

JavaScript libraries and related browser tool support.

Both Firefox 3 and IE 8 may support some standard microformats.

Ex: automatically detect hCard and hCalendar.

Allow these to be exported to your favorite address book and calendar application automatically.

Our fault microformat may be associated with a Google Map or an HTML form interface generator, for example.

Nifty hcard/hcalendar demo:

http://spaces.live.com/editorial/rayozzie/demo/liveclip/liveclipsample/clipboardexample.html

View source when you are done playing.

Social Networking Sites These are sites that build online social networks of people with shared interests. For the big list, see http://en.wikipedia.org/wiki/List_of_social_networking_websites Note the scale of users Flickr has 4,000,000 registered users. It is a medium-sized site. We’ll look at Flickr as an example. I chose it because it has the second most used API (after Google Maps) at programmableweb.com.

These are sites that build online social networks of people with shared interests.

For the big list, see

http://en.wikipedia.org/wiki/List_of_social_networking_websites

Note the scale of users

Flickr has 4,000,000 registered users.

It is a medium-sized site.

We’ll look at Flickr as an example.

I chose it because it has the second most used API (after Google Maps) at programmableweb.com.

Pre-History of Flickr Flickr began life as a side project of a massive multiplayer game “ Game Neverending” ended in 2004 It continued to evolve... Early capabilities that were dropped: Chats, real-time photo-sharing Capabilities added later Tags (and tag clouds), favorites, group photo pools Interestingness: a proprietary algorithm for determining most interesting photos for a particular time period. Who tags, how many click, number of comments, etc. Synchronous to asynchronous collaboration Source: http://en.wikipedia.org/wiki/Flickr

Flickr began life as a side project of a massive multiplayer game

“ Game Neverending” ended in 2004

It continued to evolve...

Early capabilities that were dropped:

Chats, real-time photo-sharing

Capabilities added later

Tags (and tag clouds), favorites, group photo pools

Interestingness: a proprietary algorithm for determining most interesting photos for a particular time period.

Who tags, how many click, number of comments, etc.

Synchronous to asynchronous collaboration

Flickr API Overview It is quite extensive. Supported request formats: REST XML-RPC SOAP Response Formats The above, plus JSON and serialized PHP API Kits: PHP, Python, Ruby, Perl, .NET, Java, Cold Fusion, … http://www.flickr.com/services/api/

It is quite extensive.

Supported request formats:

REST

XML-RPC

SOAP

Response Formats

The above, plus JSON and serialized PHP

API Kits:

PHP, Python, Ruby, Perl, .NET, Java, Cold Fusion, …

What Can You Do with the API? Activity: see recent photos and comments by a particular user. Favorites: add, remove, and get a list of favorites. Interestingness: get a list of photos with high interestingness scores. People: get information (email, group membership, etc). Photos: add a tag, add a comment, find the location, upload, etc. Reflection: get information about other API methods. And more.

Activity: see recent photos and comments by a particular user.

Favorites: add, remove, and get a list of favorites.

Interestingness: get a list of photos with high interestingness scores.

People: get information (email, group membership, etc).

Photos: add a tag, add a comment, find the location, upload, etc.

Reflection: get information about other API methods.

And more.

Feeds Flickr supports Atom 1.0 and various versions of RSS. You can subscribe to the following feeds Public photos, friends’ photos, group posts, discussions, news, etc. Feed URLs support optional query parameters. Useful for REST style programming. Specify a specific user ID, a specific set of tags, etc.

Flickr supports Atom 1.0 and various versions of RSS.

You can subscribe to the following feeds

Public photos, friends’ photos, group posts, discussions, news, etc.

Feed URLs support optional query parameters.

Useful for REST style programming.

Specify a specific user ID, a specific set of tags, etc.

Badges: Flickr Widgets Small, embedded HTML or Flash “widget” that you can place in other websites Like your blog. Yet another example of client side integration.

Small, embedded HTML or Flash “widget” that you can place in other websites

Like your blog.

Yet another example of client side integration.

More Information Slides and a related document will be available from http://grids.ucs.indiana.edu/ptliupages/presentations http://grids.ucs.indiana.edu/ptliupages/publications Contact: [email_address] Blog: http://communitygrids.blogspot.com

Slides and a related document will be available from

http://grids.ucs.indiana.edu/ptliupages/presentations

http://grids.ucs.indiana.edu/ptliupages/publications

Contact: [email_address]

Blog: http://communitygrids.blogspot.com