wordle.net course web site: extension school harvard ... · 3/31/2010 · 3. =, 4. {5.); 6.} 7. =...
TRANSCRIPT
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:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
2 of 94 3/31/2010 1:10 PM
Javascript: Manipulate Styles
Manipulate Styles
Manipulate Content
Communicate with Web Server (Ajax)
Javascript: Manipulate Content
Manipulate Styles
Manipulate Content
Communicate with Web Server (Ajax)
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
3 of 94 3/31/2010 1:10 PM
US Senate
Javascript: Communicate with Web Server (Ajax)
Manipulate Styles
Manipulate Content
Communicate with Web Server (Ajax)
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
4 of 94 3/31/2010 1:10 PM
Course Search
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
5 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
6 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
7 of 94 3/31/2010 1:10 PM
And do the same for the other three seasons to get:
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
8 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
9 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
10 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
11 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
12 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
13 of 94 3/31/2010 1:10 PM
Rules are quite customizable and can be expressed in JavaScript sections and not in the code markup.
form2.html
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
14 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
15 of 94 3/31/2010 1:10 PM
form3.html
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
16 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
17 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
18 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
19 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
20 of 94 3/31/2010 1:10 PM
AJAX: A New Approach to Web Applications, from Adaptive Path. by Jesse James Garrett
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
21 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
22 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
23 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
24 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
25 of 94 3/31/2010 1:10 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 a
course_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:
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
26 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
27 of 94 3/31/2010 1:10 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:
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
28 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
29 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
30 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
31 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
32 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
33 of 94 3/31/2010 1:10 PM
Course Search by Department and Instructor
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
34 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
35 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
36 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
37 of 94 3/31/2010 1:10 PM
Before you build your own...
jCarousel for jQuery
YUI Carousel Control
Prototype UI Carousel
others...
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
38 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
39 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
40 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
41 of 94 3/31/2010 1:10 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!
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
42 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
43 of 94 3/31/2010 1:10 PM
Yahoo! User Interface Library (YUI)
YUI Library Controls/Widgets
Tabs using YUI
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
44 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
45 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
46 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
47 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
48 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
49 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
50 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
51 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
52 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
53 of 94 3/31/2010 1:10 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:
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
54 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
55 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
56 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
57 of 94 3/31/2010 1:10 PM
Yahoo! Maps and RSS with GeoInfo
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
58 of 94 3/31/2010 1:10 PM
Google Earth KML
Google Maps
KML file:
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
59 of 94 3/31/2010 1:10 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. <!-- Style definitions removed for clarity --> 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
60 of 94 3/31/2010 1:10 PM
Google Maps API
iframe
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
61 of 94 3/31/2010 1:10 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.
<!-- removed additional script that processes map data for clarity --> 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)
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
62 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
63 of 94 3/31/2010 1:10 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:
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
64 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
65 of 94 3/31/2010 1:10 PM
Google Maps can consume a Geo‐tagged RSS file.
Note that the URL of the RSS file needs to absolute!
Data:
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
66 of 94 3/31/2010 1:10 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:
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
67 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
68 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
69 of 94 3/31/2010 1:10 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)
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
70 of 94 3/31/2010 1:10 PM
Timeline ViewVisible are those with birthdays in 1969‐1972. Timeline is scrollable.
Congress data used with permission from GovTrack.US.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
71 of 94 3/31/2010 1:10 PM
ShareThis
AddThis
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
72 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
73 of 94 3/31/2010 1:10 PM
Pluck
Disqus
Comments on Boston.com (Pluck):comments
Comments on thecrimson.com (Disqus):comments
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
74 of 94 3/31/2010 1:10 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.)
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
75 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
76 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
77 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
78 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
79 of 94 3/31/2010 1:10 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."
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
80 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
81 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
82 of 94 3/31/2010 1:10 PM
view plain print ?
<object… 1. <param /> 2. <param /> 3. <embed /> 4. <p>Alternate Content</p> 5.</object> 6.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
83 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
84 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
85 of 94 3/31/2010 1:10 PM
Scribd
SlideShare
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
86 of 94 3/31/2010 1:10 PM
Scribd Presentation
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
87 of 94 3/31/2010 1:10 PM
Scribd Presentation
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
88 of 94 3/31/2010 1:10 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
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
89 of 94 3/31/2010 1:10 PM
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
90 of 94 3/31/2010 1:10 PM
The JW Player is a widely‐used Flash player for video.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
91 of 94 3/31/2010 1:10 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.
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
92 of 94 3/31/2010 1:10 PM
<applet />
UC Irvine Chemistry Educational AppletsChemical Kinetics Simulation
Math, Physics, and Engineering AppletsRipple Tank
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
93 of 94 3/31/2010 1:10 PM
Copyright © 1998‐2010 David P. Heitmeyer
Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home
CSCI E-12 - March 31, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100331/handout.html
94 of 94 3/31/2010 1:10 PM