One | Link List | Examples | Lecture Notes Home | CSCI E ... · Course Search CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets /handout.html

CSCI E‐12 Fundamentals ofWebsite Development

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home

A form for lecture feedback is available from the course web site. Please take two minutes to fill it out afteryou have seen the lecture.

March 31, 2010

Harvard UniversityExtension School

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: [email protected] staff email: [email protected]

Image created at wordle.net

CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html

1 of 94 3/31/2010 1:07 PM

Markup (XHTML, HTML)

Structure

Content

Style (CSS)

Style

Presentation

Appearance

Function (Javascript)

Actions

Manipulations

Structure + Style + Function: solarsystem.html

Structure + Style: solarsystem‐style.html

Structure: solarsystem‐markup.html


2 of 94 3/31/2010 1:07 PM

Javascript: Manipulate Styles

Manipulate Styles

Manipulate Content

Communicate with Web Server (Ajax)

Javascript: Manipulate Content

Manipulate Styles

Manipulate Content



3 of 94 3/31/2010 1:07 PM

US Senate

Javascript: Communicate with Web Server (Ajax)

Manipulate Styles

Manipulate Content



4 of 94 3/31/2010 1:07 PM

Course Search


5 of 94 3/31/2010 1:07 PM


6 of 94 3/31/2010 1:07 PM

view plain print ?

<html> 1.<head> 2.<title>My Schools</title> 3.</head> 4.<body> 5.<h1>My Schools</h1> 6.<ul> 7.<li> 8.<a href="http://www.harvard.edu/" shape="rect"> 9.Harvard University</a> 10.<br /> 11.<img src="images/veritas.gif" alt="Harvard Shield" height="84" width="72" /> 12.</li> 13.<li> 14.<a href="http://www.ku.edu/" shape="rect"> 15.University of Kansas</a> 16.<br /> 17.<img src="images/KUSeal.gif" alt="University of Kansas Seal" height="73" width="72" /> 18.</li> 19.</ul> 20.</body> 21.</html> 22.


7 of 94 3/31/2010 1:07 PM

And do the same for the other three seasons to get:


8 of 94 3/31/2010 1:07 PM

Example 9.1 ‐ View example by itself

view plain print ?

<div id="seasonslist"> 1. <p><a href="#" onclick="makeSeasonsList(); return 0;" shape="rect">Click to append li2. </p> 3.</div> 4.

In script element within head element (<script type="text/javascript">):

view plain print ?

function makeSeasonsList() { 1. ul_node = document.createElement("ul"); 2. var seasons = ['Spring','Summer','Autumn','Winter']; 3. for each (var s in seasons) { 4. var text_node = document.createTextNode(s); 5. var li_node = document.createElement("li"); 6. li_node.appendChild(text_node); 7. ul_node.appendChild(li_node); 8. } 9. var container = document.getElementById("seasonslist"); 10. container.appendChild(ul_node); 11.} 12.

Markup Script


9 of 94 3/31/2010 1:07 PM

Example: Building a list with jQuery

view plain print ?

<html> 1.<head> 2.<title>List of Seasons Using jQuery</title> 3.<script src="http://morpheus.dce.harvard.edu/jquery/jquery-1.4.2.min.js" type="text/javascript" />

4.

<script type="text/javascript"> 5. $(document).ready(function() { 6. var seasons = ['Spring','Summer','Autumn','Winter']; 7. ul_node = $('<ul />'); 8. for each (var s in seasons) { 9. var li_node = $('<li />'); 10. li_node.text(s); 11. li_node.appendTo(ul_node); 12. } 13. $('#seasonslist').replaceWith(ul_node); 14.}); 15.</script> 16.</head> 17.<body> 18.<h1>Seasons</h1> 19.<div id="seasonslist"> 20. Season's List goes here. 21. </div> 22.</body> 23.</html> 24.


10 of 94 3/31/2010 1:07 PM

Example 2: Building a list with jQuery

view plain print ?

<html> 1.<head> 2.<title>List of Seasons Using jQuery</title> 3.<script src="http://morpheus.dce.harvard.edu/jquery/jquery-1.4.2.min.js" type="text/javascript" />

4.

<script type="text/javascript"> 5. $(document).ready(function() { 6. var seasons = ['Spring','Summer','Autumn','Winter']; 7. ul_node = $('<ul />'); 8. for each (var s in seasons) { 9. $('<li />').text(s).appendTo(ul_node); 10. } 11. ul_node.replaceAll($('#seasonslist')); 12. }); 13.</script> 14.</head> 15.<body> 16.<h1>Seasons</h1> 17.<div id="seasonslist">Season's List goes here.</div> 18.</body> 19.</html> 20.


11 of 94 3/31/2010 1:07 PM

jQuery Form Validation Plugin makes validating forms easy and flexible.

Form 1

Use the jquery.validation.js plugin in a basic way.

Validation rules are specified in "class" attributes


12 of 94 3/31/2010 1:07 PM

view plain print ?

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

1.

<html xmlns="http://www.w3.org/1999/xhtml"> 2.<head> 3. <title>A Form to Illustrate Validation using the jQuery Validation Plugin</title> 4. <link rel="stylesheet" type="text/css" href="form.css"/> 5. <script src="http://morpheus.dce.harvard.edu/jquery/jquery-1.4.2.min.js" 6. type="text/javascript"> </script> 7. <script type="text/javascript" 8. src="http://morpheus.dce.harvard.edu/jquery/validate/jquery.validate.js"> 9. </script> <script type="text/javascript"> 10.$(document).ready(function(){ 11. $("#myForm").validate(); 12.}); 13.</script> 14.</head> 15.<body> 16. <form id="myForm" method="post" 17. action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi"> 18. <fieldset> 19. <legend>Information</legend> 20. <p> 21. <label for="name">Name</label> <em>(Required)</em> 22. <br/> 23. <input id="name" name="name" size="25" class="required"/> </p> 24. <p> 25. <label for="email">Email Address</label> <em>(Required)</em> 26. <br/> 27. <input id="email" name="email" size="25" class="required email"/> </p> 28. <p> 29. <label for="url">URL</label> <em>(Required)</em> 30. <br/> 31. <input id="url" name="url" size="25" class="required url"/> </p> 32. <p> 33. <input class="submit" type="submit" value="Submit Form"/> </p> 34. </fieldset> 35. </form> 36.</body> 37.</html> 38.


13 of 94 3/31/2010 1:07 PM

Rules are quite customizable and can be expressed in JavaScript sections and not in the code markup.

form2.html


14 of 94 3/31/2010 1:07 PM

view plain print ?

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

1.

<html xmlns="http://www.w3.org/1999/xhtml"> 2.<head> 3. <title>A Forum to Illustrate Validation using the jQuery Validation Plugin</title> 4. <link rel="stylesheet" type="text/css" href="form.css"/> 5. <script src="http://morpheus.dce.harvard.edu/jquery/jquery-1.4.2.min.js" 6. type="text/javascript"> </script> 7. <script type="text/javascript" 8. src="http://morpheus.dce.harvard.edu/jquery/validate/jquery.validate.js"> 9. </script> 10. <script type="text/javascript"> 11. $(document).ready(function(){ 12. var validation = $("#myForm").validate( 13. { 14. rules: { 15. name: { required: true, minlength: 2 }, 16. email: { required: true, email: true }, 17. url: { required: true, url: true } 18. } 19. }); 20. }); 21. </script> 22.</head> 23.<body> 24.<form id="myForm" method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi">

25.

<fieldset> 26. <legend>A Form to Illustrate Validation using the jQuery Validation Plugin</legend> 27. <p> 28. <label for="name">Name</label><br/> 29. <input id="name" name="name" size="25"/> 30. </p> 31. <p> 32. <label for="email">Email Address</label><br/> 33. <input id="email" name="email" size="25"/> 34. </p> 35. <p> 36. <label for="url">URL</label><br/> 37. <input id="url" name="url" size="25" value="" /> 38. </p> 39. <p> 40. <input class="submit" type="submit" value="Submit"/> 41. </p> 42. </fieldset> 43. </form> 44.</body> 45.</html> 46.


15 of 94 3/31/2010 1:07 PM

form3.html


16 of 94 3/31/2010 1:07 PM


17 of 94 3/31/2010 1:07 PM

view plain print ?

$(document).ready(function(){ 1. var validation = $("#myForm").validate( 2. { 3. rules: { 4. name: { required: true, minlength: 2 }, 5. email: { required: true, email: true }, 6. url: { required: true, url: true }, 7. comments: { required: true }, 8. favnum: { required: true, number: true }, 9. favnum10: { required: true, number: true, min: 1, max: 10}, 10. color: {required: true}, 11. season: {required: true, minlength: 2}, 12. yourdate: { required: true, date: true } 13. }, 14. messages: { 15. season: { minlength: jQuery.format("Pick a minimum of {0} choices") } 16. }, 17. errorPlacement: function(error,element) { 18. if ( element.is("[name=color]") ) 19. error.appendTo( $('p#color') ); 20. else if ( element.is("[name=season]") ) 21. error.appendTo( $('p#season') ); 22. else 23. error.insertAfter(element); 24. } 25. }); 26.}); 27.


18 of 94 3/31/2010 1:07 PM

Comments and unnecessary whitespace are removed.

jquery‐1.4.2: 160 kb

jquery‐1.4.2.min.js: 70 kb56% smaller

Minify Your JS (and CSS)

Some tools you can use to minify your JS:

YUI Compressor. (JS and CSS)

Minify JS


19 of 94 3/31/2010 1:07 PM

Google and Microsoft host several JS libraries through their CDNs.Details for using jQuery from a CDN

Google Ajax Libraries API

Google Ajax Libraries API

Two options:

Direct linking, e.g.

view plain print ?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />

1.

google.load() JS method

view plain print ?

<script type="text/javascript" src="http://www.google.com/jsapi" /> 1.<script type="text/javascript"> 2. google.load("jquery", "1.4.2"); 3. google.setOnLoadCallback(function() { 4. // Place init code here instead of $(document).ready() 5. }); 6.</script> 7.

See: 3 reasons why you should let Google host jQuery for you

Decreased latency (Google CDN)

Increased Parallelism

Better Caching


20 of 94 3/31/2010 1:07 PM

AJAX: A New Approach to Web Applications, from Adaptive Path. by Jesse James Garrett


21 of 94 3/31/2010 1:07 PM

Terms:

XHR: XMLHttpRequestObject

Ajax: Asynchronous JavaScript and XML

AHAH: Asynchronous HTTP and HTML

Technologies Involved:

XHTML

CSS

JavaScript

XMLHttpRequest (XHR) object

Document Object Model (DOM)

Data: XML, JSON, XHTML


22 of 94 3/31/2010 1:07 PM


23 of 94 3/31/2010 1:07 PM


24 of 94 3/31/2010 1:07 PM


25 of 94 3/31/2010 1:07 PM

http://cscie12.dce.harvard.edu/ajax/course_jquery.html

There is a URL that returns a list of courses given a course group (as an XHTML snippet):

http://morpheus.dce.harvard.edu/ajax/course_search?description=proteinwill return a list of courses whose description contains "protein"

http://morpheus.dce.harvard.edu/ajax/course_search?description=planetwill return a list of courses whose description contains "planet"

http://morpheus.dce.harvard.edu/ajax/course_search?title=neurowill return a list of courses whose title contains "neuro"

http://morpheus.dce.harvard.edu/ajax/course_search?title=DNAwill return a list of courses whose title contains "DNA"

What's involved:

jQuery Javascript library

Server‐side process to generate course list markup (courselist_partial which take acourse_group query parameter)

Custom Javascript function (getCourseList) to call server‐side process

Javascript to invokee the custom getCourseList function.

Import jQuery

view plain print ?

<script src="/jquery/jquery.js" type="text/javascript"> </script> 1.<script src="/jquery/jquery.form.js" type="text/javascript"> </script> 2.

jQuery function:


26 of 94 3/31/2010 1:07 PM

view plain print ?

function getCourseList() { 1. var search_term = $('#search_query').val(); 2. $('#courselist').load( 3. '/ajax/course_search', 4. {'description' : search_term } 5. ); 6.} 7.

Form:

view plain print ?

<form onsubmit="getCourseList(); return false;"> 1.<div> 2. <label for="course_search">Search for Courses by Description:</label> 3. <input type="text" id="search_query" name="search_query" size="30" /> 4. <br/> 5. <input type="button" name="submit" onclick="getCourseList()" value="Search" /> 6.</div> 7.<div id="courselist"> 8. Course Listings will be updated here. 9.</div> 10.</form> 11.


27 of 94 3/31/2010 1:07 PM

Example

Ajax parts (produce HTML snippets):

Select List:ajax/select‐conference

School List:ajax/search?conference=Big%2012%20Conference

Page

Markup

JS

Server

select‐conference

search

Markup:

view plain print ?

<form id="search-form" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi"> 1. <div id="select-conference"> </div> 2. <input type="submit"/> 3. </form> 4. <hr/> 5. <div id="results_section"> </div> 6.

JS:


28 of 94 3/31/2010 1:07 PM

view plain print ?

$(document).ready(function(){ 1. setConferenceOptions(); 2. $('#search-form').submit(function(e) { 3. updateResults(); 4. e.preventDefault(); 5. }); 6. }); 7. function setConferenceOptions() { 8. $('#select-conference').load('ajax/select-conference'); 9. } 10. function updateResults() { 11. var selectedconf = $('#conference').fieldValue(); 12. var loading = $('<p>Loading...<br/><img src="images/ajax-loader-bar.gif" alt="loading"/></p>');

13.

$('#results_section').html(loading); 14. $('#results_section').load('ajax/search',{'conference':selectedconf}); 15. } 16.


29 of 94 3/31/2010 1:07 PM

Example

Instead of returning HTML to be put into the page, our server‐side process will return JSON (JavaScript ObjectNotation). We can then process the JSON data into the page.

JSON data example:

view plain print ?

{'schools':[ 1.{ 2. name:"Brown University", 3. href:"http://www.brown.edu", 4. division:"I", 5. conference:"Ivy Group", 6. conf_href:"http://www.ivyleaguesports.com/", 7. state:"Rhode Island" 8.}, 9.{ 10. name:"Harvard University", 11. href:"http://www.harvard.edu", 12. division:"I", 13. conference:"Ivy Group", 14. conf_href:"http://www.ivyleaguesports.com/", 15. state:"Massachusetts" 16.}, 17./* removed schools for clarity */ 18.]} 19.

And the JS to process it:

view plain print ?

function updateResults() { 1. var selectedconf = $('#conference').fieldValue(); 2. var loading = $('<p>Loading...<br/><img src="images/ajax-loader-bar.gif" alt="loading"/></p>');

3.

$.getJSON( 4. 'ajax/search-json', 5. {'conference':selectedconf}, 6. function(data){ 7. $('#results_section').html(''); 8. $.each(data.schools, function(i,school){ 9. $('<p>'+ school.name + '</p>').appendTo('#results_section'); 10. }); 11. }); 12.} 13.


30 of 94 3/31/2010 1:07 PM

Example

Return XML data:

And the JS changes slightly to process XML instead of JSON:

view plain print ?

function updateResults() { 1. $('#results_section').html(''); 2. var selectedconf = $('#conference').fieldValue(); 3. $.get( 4. 'ajax/search-xml', 5. {'conference':selectedconf}, 6. function(xml){ 7. $(xml).find('school').each(function(){ 8. $('<p>'+ $(this).attr('name') + '</p>').appendTo('#results_section'); 9. }) 10. }); 11.} 12.


31 of 94 3/31/2010 1:07 PM

We create an interface that allows schools to be filtered by

Division

Conference

School

Pulldown menus created through jQuery and Ajax.

When a criteria is selected, we use Ajax to dynamically update the pulldown options as well as the table ofresults.


32 of 94 3/31/2010 1:07 PM


33 of 94 3/31/2010 1:07 PM

Course Search by Department and Instructor


34 of 94 3/31/2010 1:07 PM


35 of 94 3/31/2010 1:07 PM

Instructor Options

ajax_instructor_options?department=MCB

ajax_instructor_options?department=RLL

Course Search

Designed for XHTML (fragment), XML, and JSON output.

course_search?department=MCB&output=xml

course_search?department=MCB&output=xhtml

course_search?department=MCB&output=json


36 of 94 3/31/2010 1:07 PM

document "ready" callback function loads instructor options and also searches for courses.

view plain print ?

var $j = jQuery.noConflict(); 1. 2.function loadInstructorOptions() { 3. var parameters = {}; 4. var a = $j("select[@name='department']"); 5. var b = $j("select[@name='department']/option"); 6. parameters['department'] = $j("select[@name='department'] option:selected").val(); 7. $j('#instructordiv').load('ajax_instructor_options',parameters); 8.} 9.function getCourseList() { 10. var parameters = {}; 11. parameters['output'] = 'xhtml'; 12. parameters['department'] = $j("select[@name='department'] option:selected").val(); 13. var inst = $j("select[@name='instructor'] option:selected").val(); 14. if (inst == null) { inst = '%'; } 15. parameters['instructor'] = inst; 16. $j('#courselist').load( 17. 'course_search', 18. parameters 19. ); 20.} 21.$j(document).ready( function(){ 22. $j('#department').change( function() { 23. $j("select[@name='instructor']/option:nth(1)").attr("selected","selected"); 24. loadInstructorOptions(); 25. getCourseList(); 26. }); 27.}); 28.


37 of 94 3/31/2010 1:07 PM

Before you build your own...

jCarousel for jQuery

YUI Carousel Control

Prototype UI Carousel

others...


38 of 94 3/31/2010 1:07 PM

Random Shuffle using JS and google.load()

Random Shuffle using JS and direct loading from Google

Select a random number from an array (list):

imglist[Math.floor(Math.random()*imglist.length)

imglist.length = length of the array

Math.random() = random number between 0 and 1

Math.floor() = floor function

So build it up:

imglist.length

Math.random()*imglist.length

Math.random()*imglist.length

Math.floor(Math.random()*imglist.length)

imglist[Math.floor(Math.random()*imglist.length)]

view plain print ?

<html> 1.<head> 2.<title>Display an Image</title> 3.<script src="http://www.google.com/jsapi" type="text/javascript" /> 4.<script type="text/javascript"> 5. // Load jQuery 6. google.load("jquery", "1"); 7. 8. // on page load complete, fire off a jQuery json-p query 9. // against Google web search 10. google.setOnLoadCallback(function() { 11. var imglist = [ 12. 'states/MA.png', 13. 'states/KS.png', 14. 'states/TX.png', 15. 'states/OK.png', 16. 'states/CA.png']; 17. console.log(imglist); 18. setInterval(function(){ 19. var rndimg = imglist[Math.floor(Math.random()*imglist.length)]; 20. console.log(rndimg); 21. $('#myimage').attr('src',rndimg); 22. },1000); 23. }); 24. </script> 25.</head> 26.<body> 27.<h1>Images</h1> 28.<p> 29.<img id="myimage" alt="image" src="states/AK.png" /> 30.</p> 31.</body> 32.</html> 33.


39 of 94 3/31/2010 1:07 PM

Random Shuffle using JSON data

JSON data (via image_list.json):

view plain print ?

{ 1.'images_list' : [ 2. 'states/CO.png', 3. 'states/WY.png', 4. 'states/NM.png', 5. 'states/AZ.png', 6. 'states/UT.png', 7. 'states/MT.png', 8. 'states/ID.png', 9. 'states/NV.png', 10. 'states/FL.png' 11. ] 12.} 13.

The XHTML and script:

view plain print ?

<html> 1.<head> 2.<title>Display an Image</title> 3.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" />

4.

<script type="text/javascript"> 5. $(document).ready(function() { 6. var url = 'image_list.json'; 7. var myimglist = []; 8. var i = 1; 9. console.log(url); 10. $.getJSON(url, function(data,textStatus){ 11. console.log(textStatus); 12. myimglist = data.images_list; 13. console.log(myimglist); 14. var rndimg = myimglist[Math.floor(Math.random()*myimglist.length)]; 15. console.log(i++, rndimg); 16. $('#myimage').attr('src',rndimg); 17. setInterval(function(){ 18. var rndimg = myimglist[Math.floor(Math.random()*myimglist.length)]; 19. console.log(i++, rndimg); 20. $('#myimage').attr('src',rndimg); 21. },1000); 22. }); 23. }); 24. </script> 25.</head> 26.<body> 27.<h1>Images</h1> 28.<p> 29.<img id="myimage" alt="image" src=" " /> 30.</p> 31.</body> 32.</html> 33.


40 of 94 3/31/2010 1:07 PM

Random Shuffle using XML data

XML data (via images.xml):

view plain print ?

<images> 1.<img src="states/ND.png" /> 2.<img src="states/SD.png" /> 3.<img src="states/MN.png" /> 4.<img src="states/WI.png" /> 5.<img src="states/MI.png" /> 6.</images> 7.

The XHTML and script:

view plain print ?

<html> 1.<head> 2.<title>Display an Image</title> 3.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" />

4.

<script type="text/javascript"> 5. $(document).ready(function() { 6. var url = 'images.xml'; 7. var myimglist = []; 8. var i = 1; 9. console.log(url); 10. $.get(url, function(data,textStatus){ 11. console.log(textStatus); 12. console.log(data); 13. $(data).find('img').each(function(){ 14. console.log($(this)); 15. myimglist.push($(this).attr('src')); 16. }); 17. console.log(myimglist); 18. var rndimg = myimglist[Math.floor(Math.random()*myimglist.length)]; 19. console.log(i++, rndimg); 20. $('#myimage').attr('src',rndimg); 21. setInterval(function(){ 22. var rndimg = myimglist[Math.floor(Math.random()*myimglist.length)]; 23. console.log(i++, rndimg); 24. $('#myimage').attr('src',rndimg); 25. },1000 26. ); 27. }); 28. }); 29. </script> 30.</head> 31.<body> 32.<h1>Images</h1> 33.<p> 34.<img id="myimage" alt="image" src=" " /> 35.</p> 36.</body> 37.</html> 38.


41 of 94 3/31/2010 1:07 PM

You may wish to use data from third parties. You may wish to provide your data to others to use. This is whereXML and JSON are extremely useful.

Yahoo! Web Services

Yahoo! News Search provides search results in XML and JSON formats.

Search for "Harvard University" ‐ XML

Search for "Harvard University" ‐ JSON

Security restrictions put limitations on cross‐domain JSON requests.

proxy

use "callback" functions

dynamic script loading

JS

Create the URL

Get the JSON data from Yahoo!


42 of 94 3/31/2010 1:07 PM

Build HTML content from JSON data

Insert HTML onto page

view plain print ?

var query = 'Harvard%20University'; 1. var appid = 'yMIOotnV34HMbuKM5K0M7Mxk5XET_WRCmG2Wq38O9kU6QZDFWZFlY8V0F2y..5DDRmJ5I6M8'; 2. var results = 5; 3. var language = 'en'; 4. var output = 'json' 5. var urlbase = 'http://search.yahooapis.com/NewsSearchService/V1/newsSearch?'; 6. var url = urlbase; 7. url = url + 'appid=' + appid; 8. url = url + '&results=' + results; 9. url = url + '&language=' + language; 10. url = url + '&output=' + output; 11. url = url + '&query=' + query; 12. url = url + '&callback=' + '?'; 13. $(document).ready(function(){ 14. $.getJSON(url, function(data){ 15. $('<ul id="newslist"> </ul>').appendTo('#news'); 16. $.each(data.ResultSet.Result, function(i,item){ 17. pubdate = new Date(item.PublishDate*1000); 18. var newsitem = '<a href="' + item.Url + '" class="newstitle">' + item.Title + '</a>'19. newsitem += '<br/>' + '<span class="newssource">' + item.NewsSource + '</span>'; 20. newsitem += '<br/>' + '<span class="publishdate">' + pubdate.toUTCString() + '</span21. newsitem += '<div class="newssummary">' + item.Summary+ '</div>'; 22. newsitem = '<li>' + newsitem + '</li>'; 23. $(newsitem).appendTo('#newslist'); 24. }); 25. }); 26.}); 27.

Markup

view plain print ?

<body> 1. <h1>Harvard University</h1> 2. <div id="news"> 3. <p><strong>Harvard in the News</strong></p> 4. </div> 5. <div id="main"> 6. <p> 7. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ... 8. </p> 9. ... 10.</body> 11.

Working Example: Yahoo News and JSON


43 of 94 3/31/2010 1:07 PM

Yahoo! User Interface Library (YUI)

YUI Library Controls/Widgets

Tabs using YUI


44 of 94 3/31/2010 1:07 PM

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richlyinteractive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library alsoincludes several core CSS resources. All components in the YUI Library have been released as open sourceunder a BSD license and are free for all uses.

YUI Table with Congress and XML

Congress: Datatable with YUI and XML


45 of 94 3/31/2010 1:07 PM


46 of 94 3/31/2010 1:07 PM

Congress Data in YUI DataTable

Congress Data in XML

Yahoo! User Interface Library (YUI) is used in this example. YUI DataTable is used to create a table from XMLdata, which is retrieved with a YUI DataSource

Client‐side

Load YUI libraries

Define a DataSource

Define a DataTable

Define Column Definitions

Define any special formatters

Server‐side

Generate Congress XML Data

Load YUI Libraries

view plain print ?

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />

1.

<link rel="stylesheet" type="text/css" 2. href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css" />

3.

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

4.

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>

5.

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>

6.

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>

7.

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>

8.

Define DataSource and DataTable


47 of 94 3/31/2010 1:07 PM

view plain print ?

YAHOO.util.Event.addListener(window, "load", function() { 1. YAHOO.example.XHR_XML = function() { 2. 3. // Define DataSource 4. // Map XML elements to Data fields (not done automatically) 5. var myDataSource = new YAHOO.util.DataSource("ajax_congress"); 6. myDataSource.connMethodPost = true; 7. myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; 8. myDataSource.responseSchema = { 9. resultNode: "person", 10. fields: ["name","state","party","chamber","url"] 11. }; 12. 13. // Define function to format Name 14. var formatName = function(elCell, oRecord, oColumn, sData) { 15. elCell.innerHTML = "<a href='" + oRecord.getData("url") + "' target='_blank'>"16. }; 17. 18. // Define Columns for table 19. // Map to data in DataSource and define sortability and formatting 20. var myColumnDefs = [ 21. {key:"name", label:"Name", sortable: true, formatter: formatName }, 22. {key:"state", label:"State", sortable: true}, 23. {key:"party", label:"Party", sortable: true}, 24. {key:"chamber",label:"Chamber", sortable: true} 25. ]; 26. // Define DataTable 27. // Where to put it (#congress) 28. // Columns and DataSource 29. var myDataTable = new YAHOO.widget.DataTable( 30. "congress", 31. myColumnDefs, 32. myDataSource); 33. 34. return { 35. oDS: myDataSource, 36. oDT: myDataTable 37. }; 38. }(); 39.}); 40.


48 of 94 3/31/2010 1:07 PM

Ext JS is a cross‐browser JavaScript library for building rich internet applications.

High performance, customizable UI widgets

Well designed, documented and extensible Component model

Commercial and Open Source licenses available

Ext Grid with Congress and XML

Congress: Datatable with Ext JS and XML


49 of 94 3/31/2010 1:07 PM


50 of 94 3/31/2010 1:07 PM

Congress Data in YUI DataTable

Congress Data in XML

Client‐side

Load Ext JS libraries

Define a Data Store

Define a Data Grid

Define Column Definitions

Define any special renderers

Server‐side

Generate Congress XML Data

Load Ext JS Libraries

view plain print ?

<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css" /> 1.<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"> </script> 2.<script type="text/javascript" src="../js/ext/ext-all.js"> 3.

Define DataSource and DataTable


51 of 94 3/31/2010 1:07 PM

view plain print ?

myurl = 'ajax_congress' ; 1.Ext.onReady(function(){ 2. 3.// create the Data Store 4.var store = new Ext.data.Store({ 5. // load using HTTP 6. url: myurl, 7. 8. // the return will be XML, so lets set up a reader 9. reader: new Ext.data.XmlReader({ 10. // records will have an "person" tag 11. record: 'person', 12. id: 'id', 13. }, 14. // set up the fields mapping into the xml doc 15. ['name', 'chamber', 'party', 'state', 'url'] 16. ) 17. }); 18. 19. function formatName(value,p,record) { 20. var url = record.data.url; 21. var str = '<a href="'+ url + '">' + value + '</a>'; 22. return str; 23. } 24. 25. // create the grid 26. var grid = new Ext.grid.GridPanel({ 27. store: store, 28. columns: [ 29. {header: "Name", width: 180, 30. dataIndex: 'name', 31. sortable: true, renderer: formatName}, 32. {header: "State", width: 180, dataIndex: 'state', sortable: true}, 33. {header: "Party", width: 180, dataIndex: 'party', sortable: true}, 34. {header: "Chamber", width: 180, dataIndex: 'chamber', sortable: true} 35. ], 36. stripeRows: true, 37. renderTo:'congressgrid', 38. autoHeight: true 39. }); 40. store.load(); 41. }); 42.


52 of 94 3/31/2010 1:07 PM

RSS and Atom are lightweight XML formats for sharing headlines and other Web content.

RSS Snippet: Item

The heart of an RSS feed is an "item", which can have a title, link, and description.Item from BBC News:

view plain print ?

<item> 1. <title>Global market turmoil continues</title> 2. <description>Major global stock markets extend losses in the 3. aftermath of the demise of top US investment bank Lehman Brothers. 4. </description> 5. <link>http://news.bbc.co.uk/go/rss/-/1/hi/business/7617976.stm</link> 6. <guid isPermaLink="false">http://news.bbc.co.uk/1/hi/business/7617976.stm</guid> 7. <pubDate>Tue, 16 Sep 2008 10:50:41 GMT</pubDate> 8. <category>Business</category> 9. <media:thumbnail width="66" height="49" 10. url="http://newsimg.bbc.co.uk/media/images/45021000/jpg/_45021012_7cda174f-775d-464f-a457-329f430eb7cb.jpg"/>

11.

</item> 12.

Atom Snippet


53 of 94 3/31/2010 1:07 PM

view plain print ?

<entry> 1. <title>Google Launches New Browser</title> 2. <link rel="alternate" type="text/html" href="http://www.mozillazine.org/talkback.html?article=25592" />

3.

<modified>2008-09-03T14:33:29-08:00</modified> 4. <created>2008-09-03T14:33:29-08:00</created> 5. <issued>2008-09-03T14:33:29-08:00</issued> 6. <id>tag:mozillazine.org,2004:article25592</id> 7. <author> 8. <name>mozillaZine.org</name> 9. </author> 10. <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.mozillazine.org/">

11.

<![CDATA[<p>Google has launched a new open source browser, <a href="http://googleblog./2008/09/fresh-take-on-browser.html">Chrome</a>. The new browser boasts a minimalistic UI, a new Javascript engin

12.

<p>Gigaom has published an article including <a href="http://gigaom.com/2008/09/01/mozilla-not-worried-about-google-browser/" title="Mozilla Not Worried About Google Browser">comments from Mozilla CEO John

13.

<p>PCMag has published an article <a href="http://www.pcmag.com/article2/0,2817,2329267,00.asp" title="Mozilla Chief Welcomes Google Chrome to Market"> commenting//john.jubjubs.net/2008/09/01/thoughts-on-chrome-more/">introduction of Chrome affects Mozilla and its relationship with Google.</a> Mitche//blog.lizardwrangler.com/2008/09/02/mozilla-firefox-and-google-chrome/">open development process and the need to continue building great products</a> in a comp

14.

<p>CNet News Webware has articles commenting on Chrome's <a href="http://news.cnet.com/8301-17939_109-10030888-2.html">Javascript performance</a> and Chrome's <a href="http://news.cnet.com/8301-17939_109-10030522-2.html">fine print</a>, specifically auto update.</p>

15.

<p>Last week, Google and Mozilla <a href="http://www.betanews.com/article/Google_extends_its_investment_in_Mozilla_restores_MPL_license/1219963665">extended their search partnership</a> until 2011.</p>

16.

<p>News of Google Chrome leaked early when the <a href="http://www.google.com/googlebooks/chrome/index.html">comic book explaining Chrome's features</a> was published before Chrome was f</p>]]>

17.

<![CDATA[<p><a href="http://www.mozillazine.org/talkback.html?article=25592">Talkback</a></p>]]>

18.

</content> 19.</entry> 20.

Atom feed displayed in Firefox:


54 of 94 3/31/2010 1:07 PM

External Application

Email client

Web Browser

Portal (e.g. iGoogle, My Yahoo!)

Subscribe to Feeds via an E‐mail client

Firefox "Live Bookmarks"

Firefox "Live Bookmarks" alert you to the existence of an RSS feed for a site and allow convenient access to theitems in the feed.


55 of 94 3/31/2010 1:07 PM

Adapting and extending RSS for use with iTunes, iPods, and other mobile media players.

Each "item" has an "enclosure," which is a link to the media file (typically MP3).

iTunes uses a specific XML module added to RSS (note the itunes prefix to some elements within theitem.

Podcast snippet ( WBUR/NPR On Point with Tom Ashbrook Podcast ):

view plain print ?

<item> 1. <title>Banks on the Brink</title> 2. <description>Bear Stearns was bailed out. Then Fannie and Freddie. Now Lehman Brothe3. <pubDate>Mon, 15 Sep 2008 18:34:13 -0400</pubDate> 4. <link>http://www.onpointradio.org</link> 5. <guid>http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/94647420/WBUR_94647420.mp3</guid>

6.

<itunes:summary>Bear Stearns was bailed out. Then Fannie and Freddie. Now Lehman Bro7. <itunes:keywords>WBUR,WBUR FM,On Point from WBUR,Boston,Massachusetts</itunes:keywor8. <itunes:duration>45:54</itunes:duration> 9. <itunes:explicit>no</itunes:explicit> 10. <enclosure url="http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/94647420/WBUR_94647420.mp3" length="22032080" type="audio/mpeg"/>

11.

</item> 12.


56 of 94 3/31/2010 1:07 PM

view plain print ?

<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" 1. xmlns:ymaps="http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps.xsd"> 2. <channel> 3. <title>David's Favorite Lunch Spots</title> 4. <link>http://cscie153.dce.harvard.edu/</link> 5. <item> 6. <title>Pinnochio's Pizza</title> 7. <link>http://www.pinocchiospizza.net/</link> 8. <description>The best pizza in the Square. Get a Sicilian slices of Tomato & Bas9. and Spinache.</description> 10. <geo:lat>42.371984</geo:lat> 11. <geo:long>-71.120269</geo:long> 12. </item> 13. <item> 14. <title>Felipe's Taqueria</title> 15. <link>http://www.felipestaqueria.com/</link> 16. <geo:lat>42.372436</geo:lat> 17. <geo:long>-71.11962</geo:long> 18. <description>Great burritos. Get a super carnitas burrito with black 19. beans.</description> 20. </item> 21. <item> 22. <title>Crema Cafe</title> 23. <link>http://www.cremacambridge.com/</link> 24. <geo:lat>42.373465</geo:lat> 25. <geo:long>-71.120722</geo:long> 26. <description>Great cafe and bakery. I prefer the quiche or soup for lunch -- and co</description>

27.

</item> 28. </channel> 29.</rss> 30.


57 of 94 3/31/2010 1:07 PM

Yahoo! Maps and RSS with GeoInfo


58 of 94 3/31/2010 1:07 PM

Google Earth KML

Google Maps

KML file:


59 of 94 3/31/2010 1:07 PM

view plain print ?

<?xml version="1.0" encoding="UTF-8"?> 1.<kml xmlns="http://earth.google.com/kml/2.1"> 2. <Document> 3. <name>campus.kml</name> 4. <Folder> 5.  6. <Placemark> 7. <name>Harvard Hall</name> 8. <LookAt> 9. <longitude>-71.11820174618717</longitude> 10. <latitude>42.37468611065936</latitude> 11. <altitude>0</altitude> 12. <range>414.8710414637541</range> 13. <tilt>0</tilt> 14. <heading>19.04204492075862</heading> 15. <altitudeMode>relativeToGround</altitudeMode> 16. </LookAt> 17. <styleUrl>#sn_icon161</styleUrl> 18. <Point> 19. <coordinates>-71.11820143657442,42.37479773771486,0</coordinates> 20. </Point> 21. </Placemark> 22. <Placemark> 23. <name>53 Church St. Computer Labs</name> 24. <LookAt> 25. <longitude>-71.12081237526492</longitude> 26. <latitude>42.37428080261569</latitude> 27. <altitude>0</altitude> 28. <range>127.8780832879778</range> 29. <tilt>0</tilt> 30. <heading>19.04039003961311</heading> 31. </LookAt> 32. <styleUrl>#msn_icon16</styleUrl> 33. <Point> 34. <coordinates>-71.12108078801248,42.3743458912808,0</coordinates> 35. </Point> 36. </Placemark> 37. <Placemark> 38. <name>Science Center</name> 39. <LookAt> 40. <longitude>-71.11764471853587</longitude> 41. <latitude>42.37508544261324</latitude> 42. <altitude>0</altitude> 43. <range>452.4599308259138</range> 44. <tilt>0</tilt> 45. <heading>19.04242029149159</heading> 46. <altitudeMode>relativeToGround</altitudeMode> 47. </LookAt> 48. <styleUrl>#msn_icon160</styleUrl> 49. <Point> 50. <coordinates>-71.11706553293479,42.3761838835312,0</coordinates> 51. </Point> 52. </Placemark> 53. <Placemark> 54. <name>John Harvard Statue</name> 55. <LookAt> 56. <longitude>-71.11741675416918</longitude> 57. <latitude>42.37422825709041</latitude> 58. <altitude>0</altitude> 59. <range>154.2193886211594</range> 60. <tilt>0</tilt> 61. <heading>19.04257399409277</heading> 62. </LookAt> 63. <styleUrl>#default+icon=http://maps.google.com/mapfiles/kml/pal3/icon63.png</styleUrl>

64.

<Point> 65. <coordinates>-71.11732299841476,42.37449718905859,0</coordinates> 66. </Point> 67. </Placemark> 68.


60 of 94 3/31/2010 1:07 PM

Google Maps API

iframe


61 of 94 3/31/2010 1:07 PM

Javascript Application that uses Ajax to pull in map marker data.

Load Google Map JS from Google

Provide our data through Ajax

Create "markers" for map according to Google Map API

Place "markers" and information on maps via XML data.

Live Example: Ivy Group Map

Markup:

view plain print ?

<html> 1. <head> 2. <script src="http://maps.google.com/maps?t=h&file=api&v=2&key=YOUR_GOOGLE_MAP_KEY" type="text/javascript"></script>

3.

 4. </head> 5. <body onload="load()" onunload="GUnload()"> 6. <h1>Google Map of "Ivy Group" Schools</h1> 7. <div id="map" style="width: 650px; height: 450px"> </div> 8. </body> 9.</html> 10.

Data (ivy.xml)


62 of 94 3/31/2010 1:07 PM

view plain print ?

<markers xmlns:h="http://www.w3.org/1999/xhtml"> 1. <marker lat="41.827763" lng="-71.404803" label="Brown University"/> 2. <marker lat="40.808352" lng="-73.963609" 3. label="Columbia University-Barnard College"/> 4. <marker lat="42.446483" lng="-76.482825" label="Cornell University"/> 5. <marker lat="43.707718" lng="-72.288322" label="Dartmouth College"/> 6. <marker lat="42.374438" lng="-71.117254" label="Harvard University"/> 7. <marker lat="39.95028" lng="-75.195065" label="University of Pennsylvania"/> 8. <marker lat="40.346544" lng="-74.65682" label="Princeton University"/> 9. <marker lat="41.311082" lng="-72.962952" label="Yale University"/> 10.</markers> 11.

JS to process Data

view plain print ?

function load() { 1. if (GBrowserIsCompatible()) { 2. var map = new GMap2(document.getElementById("map")); 3. map.addControl(new GSmallMapControl()); 4. map.addControl(new GMapTypeControl()); 5. map.addControl(new GOverviewMapControl()); 6. map.setCenter(new GLatLng(41,-74), 6); 7. map.setMapType(G_MAP_TYPE); 8. // Download the data in data.xml and load it on the map. The format we 9. GDownloadUrl("ivy.xml", function(data) { 10. var xml = GXml.parse(data); 11. var markers = xml.documentElement.getElementsByTagName("marker"); 12. for (var i = 0; i < markers.length; i++) { 13. var elem = markers[i]; 14. var point = new GLatLng(parseFloat(elem.getAttribute("lat")), 15. parseFloat(elem.getAttribute("lng"))); 16. gmarker = createMarker(point,elem); 17. map.addOverlay(gmarker); 18. } 19. }); 20. } 21.} 22.function createMarker(point,elem) { 23. var gmarker = new GMarker(point); 24. var label = elem.getAttribute("label"); 25. GEvent.addListener(gmarker, "click", function() { 26. gmarker.openInfoWindow(label); 27. }); 28. return gmarker; 29.} 30.


63 of 94 3/31/2010 1:07 PM

Google Maps API can consume a KML file.

Note that the URL of the KML file needs to absolute!

Data: hot_chocolate.kml

Page:


64 of 94 3/31/2010 1:07 PM

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml" 3. xmlns:v="urn:schemas-microsoft-com:vml"> 4. <head> 5. <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 6. <title>Google Maps API Example: GGeoXml KML Overlay</title> 7. <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAr30lFNaL37OqRdrO8ZyZfhRaxLnIRbm305dZabRRYkZrI_UOrBSmVsnwDYvmdxVa2WUtMr0jBR

8.

type="text/javascript"></script> 9. <script type="text/javascript"> 10. 11. var map; 12. var geoXml; 13. var kmlurl = 'hot_chocolate.kml'; 14. 15. function initialize() { 16. if (GBrowserIsCompatible()) { 17. console.log(document.URL); 18. var myDocumentURL = document.URL; 19. var feedFile = "hot_chocolate.kml"; 20. feedURL = myDocumentURL.replace(/\/[^\/]*\.html/,'/'+feedFile); 21. /* or could specify the feedURL as an absolute one: 22. http://morpheus.dce.harvard.edu/~dheitmey/maps/hot_chocolate.kml 23. */ 24. 25. console.log(feedURL); 26. geoXml = new GGeoXml(feedURL); 27. 28. 29. map = new GMap2(document.getElementById("map_canvas")); 30. map.setCenter(new GLatLng(42.37,-71.12), 12); 31. map.addControl(new GLargeMapControl()); 32. map.addOverlay(geoXml); 33. } 34. } 35. </script> 36. </head> 37. 38. <body onload="initialize()"> 39. <h1>Great Places for Hot Chocolate around Harvard University</h1> 40. <div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid</div>

41.

</body> 42.</html> 43.


65 of 94 3/31/2010 1:07 PM

Google Maps can consume a Geo‐tagged RSS file.

Note that the URL of the RSS file needs to absolute!

Data:


66 of 94 3/31/2010 1:07 PM

view plain print ?

<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" 1. xmlns:ymaps="http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps.xsd"> 2. <channel> 3. <title>David's Favorite Lunch Spots</title> 4. <link>http://cscie12.dce.harvard.edu/</link> 5. <item> 6. <title>Pinnochio's Pizza</title> 7. <link>http://www.pinocchiospizza.net/</link> 8. <description>The best pizza in the Square. Get a Sicilian slices of Tomato & Bas9. and Spinache.</description> 10. <geo:lat>42.371984</geo:lat> 11. <geo:long>-71.120269</geo:long> 12. </item> 13. <item> 14. <title>Felipe's Taqueria</title> 15. <link>http://www.felipestaqueria.com/</link> 16. <geo:lat>42.372436</geo:lat> 17. <geo:long>-71.11962</geo:long> 18. <description>Great burritos. Get a super carnitas burrito with black 19. beans.</description> 20. </item> 21. <item> 22. <title>Crema Cafe</title> 23. <link>http://www.cremacambridge.com/</link> 24. <geo:lat>42.373465</geo:lat> 25. <geo:long>-71.120722</geo:long> 26. <description>Great cafe and bakery. I prefer the quiche or soup for lunch -- and co</description>

27.

</item> 28. </channel> 29.</rss> 30.

Page:


67 of 94 3/31/2010 1:07 PM

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 5. <title>Google Maps API Example : GGeoXml RSS Overlay</title> 6. <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAr30lFNaL37OqRdrO8ZyZfhRaxLnIRbm305dZabRRYkZrI_UOrBSmVsnwDYvmdxVa2WUtMr0jBR

7.

type="text/javascript"></script> 8. <script type="text/javascript"> 9. 10. var map; 11. var geoXml; 12. var toggleState = 1; 13. 14. function initialize() { 15. if (GBrowserIsCompatible()) { 16. 17. var myDocumentURL = document.URL; 18. var feedFile = "lunch.xml"; 19. feedURL = myDocumentURL.replace(/\/[^\/]*\.html/,'/'+feedFile); 20. /* or could specify the feedURL as an absolute one: 21. http://morpheus.dce.harvard.edu/~dheitmey/maps/lunch.xml 22. */ 23. 24. geoXml = new GGeoXml(feedURL); 25. 26. map = new GMap2(document.getElementById("map_canvas")); 27. map.setCenter(new GLatLng(42.372,-71.12), 16); 28. map.addControl(new GLargeMapControl()); 29. map.addControl(new GLargeMapControl()); 30. map.addOverlay(geoXml); 31. } 32. } 33. 34. </script> 35. </head> 36. 37. <body onload="initialize()"> 38. <h1>My Favorite Lunch Places</h1> 39. <div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid</div>

40.

</body> 41.</html> 42.


68 of 94 3/31/2010 1:07 PM

The SIMILE project from MIT has some excellent examples of JS applications

Exhibit

Timeline

Timeplot

Exhibit: Sites Using Web Standards

Timeline on www.recovery.gov


69 of 94 3/31/2010 1:07 PM

Provide the data and the template, and Exhibit provides the functionality: different views, timeline accordingto birth date, filtering, sorting, and grouping.

Tiles View

Table View (columns are sortable)

Thumbnails View (Filters applied: California, Democrat)


70 of 94 3/31/2010 1:07 PM

Timeline ViewVisible are those with birthdays in 1969‐1972. Timeline is scrollable.

Congress data used with permission from GovTrack.US.


71 of 94 3/31/2010 1:07 PM

ShareThis

AddThis


72 of 94 3/31/2010 1:07 PM


73 of 94 3/31/2010 1:07 PM

Pluck

Disqus

Comments on Boston.com (Pluck):comments

Comments on thecrimson.com (Disqus):comments


74 of 94 3/31/2010 1:07 PM

<a href="...">...</a>

Content displayed by browser

XHTML, HTML, CSS, Images (JPEG, PNG, GIF)

"Other" Content

Handled by browser plugin

Handled by external application

Examples of other content types:

Video/audio

MS Word, Excel, PowerPoint, etc.

Adobe PDF document

ZIP files

Any other file type (Mathematica, SAS, etc.)


75 of 94 3/31/2010 1:07 PM

Web Server: sends "content‐type" HTTP response header

Web Browser: receives "content‐type" header. Based upon configuration, it will:

render the content natively

render the content through a browser plugin

launch an external application to render the content

prompt the user to save the file or to choose a program

Example: A link to Mathematica Notebook: "Effects Of Bin Width And Height In A Histogram"

Server HTTP response headers include:Content-Type: application/mathematica

Possible Browser responses

System is not aware of content‐type:1.

System is aware of content type:2.

System is aware of content type and browser configured to launch external application:3.


76 of 94 3/31/2010 1:07 PM


77 of 94 3/31/2010 1:07 PM

Flash Player is the browser plugin

SWF is file format

Authoring tools: Flash and Flex

ActionScript is the proprietary scripting language (based on JavaScript)

Webkinz

Video

Charts

MLB Gameday

ESPN Gamecast

Flash Earth


78 of 94 3/31/2010 1:07 PM


79 of 94 3/31/2010 1:07 PM

Mechanisms

embed element

object element

Nested object and/or embed

DOM Scripting (JavaScript)

Issues

Standards compliance

Cross‐browser

Alternative content

Player/Content mismatches

See: "Flash Embedding Cage Match" on "A List Apart."


80 of 94 3/31/2010 1:07 PM

Widely supported across browsers

Not standards compliant

Limited support for alternative content

view plain print ?

<embed src="http://d.scribd.com/ScribdViewer.swf?docu..." 1. pluginspage="http://www.macromedi..." 2. play="true" 3. loop="true" 4. scale="showall" 5. wmode="opaque" 6. devicefont="false" 7. gcolor="#ffffff" 8. name="doc_180376816499551_object" 9. menu="true" 10. quality="high" 11. allowfullscreen="true" 12. allowscriptaccess="always" 13. salign="" 14. type="application/x-shockwave-flash" 15. align="middle" 16. height="500" 17. width="100%" /> 18.<noembed>Alternate Content</noembed> 19.


81 of 94 3/31/2010 1:07 PM

Cross‐browser issues

Superior support for alternative content

view plain print ?

<object 1. codebase="http://download.m..." 2. id="doc_180376816499551" 3. name="doc_180376816499551" 4. classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" > 5. <param name="movie" value="http://d.scribd.com/Scribd... " /> 6. <param name="quality" value="high" /> 7. <param name="play" value="true"/> 8. <param name="loop" value="true"/> 9. <param name="scale" value="showall"/> 10. <param name="wmode" value="opaque"/> 11. <param name="devicefont" value="false"/> 12. <param name="bgcolor" value="#ffffff"/> 13. <param name="menu" value="true"/> 14. <param name="allowFullScreen" value="true"/> 15. <param name="allowScriptAccess" value="always"/> 16. <p>Alternate Content</p> 17.</object> 18.


82 of 94 3/31/2010 1:07 PM

view plain print ?

<object… 1. <param /> 2. <param /> 3. <embed /> 4. <p>Alternate Content</p> 5.</object> 6.


83 of 94 3/31/2010 1:07 PM

Use JavaScript build the appropriate markup

Cross‐browser flexibility

Can use "object" where available

Can use "embed" where necessary

Support for alternative content

Support for content and player version matching


84 of 94 3/31/2010 1:07 PM

SWFObject is an easy‐to‐use and standards‐friendly method to embed Flash content, which utilizes one smallJavaScript file.

Set params, attributes, and flashvars as JavaScript variables

Call embedSWF function


85 of 94 3/31/2010 1:07 PM

Scribd

SlideShare


86 of 94 3/31/2010 1:07 PM

Scribd Presentation


87 of 94 3/31/2010 1:07 PM

Scribd Presentation


88 of 94 3/31/2010 1:07 PM

XML/SWF Charts

Charts SWF is provided

You provide the data in an XML format

Files involved:

Container XHTML: chart.html

SWF provided by XML/SWF Charts: charts.swf

Your Data in XML format: census.xml


89 of 94 3/31/2010 1:07 PM


90 of 94 3/31/2010 1:07 PM

The JW Player is a widely‐used Flash player for video.


91 of 94 3/31/2010 1:07 PM

The JW Player is a widely‐used Flash player for video.

Quick Demo of Firebug Screencast

JW Player (Flash)

MP4 Screencast (produced via Jing)

swfobject.js to include

view plain print ?

script type='text/javascript' src='../swfobject/swfobject.js'> 1.</script> 2. 3. <div id='mediaspace'> 4. This div will be replaced 5. </div><script type='text/javascript'> 6. var flashvars = {}; 7. var params = {}; 8. var attributes = {}; 9. params.allowfullscreen='true'; 10. params.allowscriptacces='true'; 11. params.wmode='opaque'; 12. flashvars.file='firebug-demo.mp4'; 13. flashvars.stretching='uniform'; 14. swfobject.embedSWF("player.swf", "mediaspace", 15. "600", "600", "9.0.0", false, 16. flashvars, params, attributes); 17. </script> 18.


92 of 94 3/31/2010 1:07 PM

<applet />

UC Irvine Chemistry Educational AppletsChemical Kinetics Simulation

Math, Physics, and Engineering AppletsRipple Tank


93 of 94 3/31/2010 1:07 PM

Copyright © 1998‐2010 David P. Heitmeyer

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home


94 of 94 3/31/2010 1:07 PM

Documents

One | Link List | Examples | Lecture Notes Home | CSCI E ... · Course Search CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets /handout.html