Second Part of a tutorial on Web 2.0 given at CTS2007 Conference May 21 2007. http://www.engr.udayton.edu/faculty/wsmari/cts07/

1. Marlon Pierce, Geoffrey Fox Community Grids Lab Indiana University

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

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

13. 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 + ')');

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

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

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

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

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

51. RSS Feeds Individual RSS Feed Group RSS Feed

58. Web Interface Click to save it as a reference

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

62. A short guide to REST-style Web Services.

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

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

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

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

77. How to Use S3 With PHP programming examples

79. $ 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.

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

81. function createBucket($bucket, $acl = 'private') { $httpDate = gmdate(&quot;D, d M Y G:i:s T&quot;); echo $httpDate; $stringToSign = &quot;PUT$httpDatex-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

83. 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$httpDatex-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

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

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

91. Bay1Temp Atom Feed in iGoogle

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

96. Aggregating the Rich Internet Experiences and other buzz phrases

100. Google Gadgets Netvibes Widgets

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

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