April 2, 2008
Harvard University
Division of Continuing Education
Extension School
Course Web Site: http://cscie12.dce.harvard.edu/
Copyright 1998-2008 David P. Heitmeyer
Instructor email:
david_heitmeyer@harvard.edu
Course staff email:
cscie12@fas.harvard.edu
Suggested readings for Web 2.0:
What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software by Tim O'Reilly
Principles, Characteristics, Features:
Web 2.0 Meme Map by Tim O'Reilly
Visualizing Web 2.0 by Dion Hinchcliffe
Visualizing Web 2.0, Peter, blog.forret.com
Zillow
www.zillow.com
Housingmaps.com
www.housingmaps.com
ChicagoCrime.org
www.chicagocrime.org
Del.icio.us
del.icio.us
Flickr
flickr.com
Encyclopedia of Life, www.eol.org
WASHINGTON (May 9, 2007) – Many of the world’s leading scientific institutions today announced the launch of the Encyclopedia of Life, an unprecedented global effort to document all 1.8 million named species of animals, plants, and other forms of life on Earth. For the first time in the history of the planet, scientists, students, and citizens will have multi-media access to all known living species, even those that have just been discovered.
more
Falco peregrinus (Peregrine Falcon)
|
|
Amazon.com offers several different web services, including one for e-commerce.
Yahoo! Developer Network. REST Web Services using XML and JSON.
Rich Internet Applications (RIA)
Rich User Experience
AJAX: A New Approach to Web Applications, from Adaptive Path. by Jesse James Garrett
http://minerva.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):
Note that the search is case-insensitive.
What's involved:
courselist_partial which take a course_group query parameter)getCourseList) to call server-side processgetCourseList function.Import jQuery
jQuery function:
Form:
Markup:
JS:
Instead of returning HTML to be put into the page, our server-side process will return JSON (JavaScript Object Notation). We can then process the JSON data into the page.
JSON data example:
And the JS to process it:
Return XML data:
And the JS changes slightly to process XML instead of JSON:
We create an interface that allows schools to be filtered by
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 of results.
You may wish to use data from third parties. You may wish to provide your data to others to use. This is where XML and JSON are extremely useful.
Yahoo! News Search provides search results in XML and JSON formats.
Security restrictions put limitations on cross-domain JSON requests.
JS
Markup
Working Example: Yahoo News and JSON
Javascript Application that uses Ajax to pull in map marker data.
Place "markers" and information on maps via XML data.
Markup:
Data (ivy.xml)
JS to process Data
Javascript Application that uses Ajax to pull in map marker data.
Place "markers" and information on maps via XML data.
Markup:
Javascript createMarker function:
The SIMILE project from MIT has some great examples of JS applications
Provide the data and the template, and Exhibit provides the functionality: different views, timeline according to birth date, filtering, sorting, and grouping.
Tiles View
Table View (columns are sortable)
Thumbnails View (Filters applied: California, Democrat)
Timeline View
Visible are those with birthdays in 1969-1972. Timeline is scrollable.
Congress data used with permission from GovTrack.US.
Note that can content is typically XHTML, but could be any type of media (e.g. CSS, PDF, PNG, JPG, GIF, Excel, Word, etc.)
There's no single best way to produce dynamic documents, but depending upon the situation, some solutions will be better than others.
Examples: CGI
Examples: FastCGI (language neutral), Servlet/JSP, ColdFusion
Examples: PHP, Perl under Apache mod_perl, Servlet/JSP, ColdFusion
Markup or content is embedded within a program.
Here the "CGI.pm" Perl module creates tags with subroutine calls.
h1("Hello, World!")
<h1>Hello World!</h1>
Without a "name", present the user a form. With a name, provide a greeting.
Examples include: SSI, PHP, JSP, ASP, some Perl template systems
JSP example:
From the PHP manual:
PHP, which stands for "PHP: Hypertext Preprocessor" is a widely-used Open Source general-purpose scripting language that is especially suited for Web development and can be embedded into HTML. Its syntax draws upon C, Java, and Perl, and is easy to learn. The main goal of the language is to allow web developers to write dynamically generated web pages quickly, but you can do much more with PHP.
http://cscie12.dce.harvard.edu/cgi/hello.php
MVC design pattern separates:
You can adopt this design pattern regardless of language or server-architecture (CGI, internal process, external process). Some frameworks make using MVC possible, some hard, some easy, some insist on it.
e.g.ivy/list.html
Template uses an "expression" language to produce content, not Java. There is a Java process ("Controller" and "Model") that gets the data, and then forwards the data to the "View" component for processing on the server before it is sent to the browser.
In this example, an array of "schools" is available to the view. The schools are essentially a map that could be represented like:
Sample Data from "Model"
EL Page ("View")
The result:
e.g.ivy/seals.html
Based upon the URL pattern, the "Controller" can call a different view. The "Model" provides the same data in this case. Our template produces a display of the schools' seals.
The result:
e.g.ivy/markers.xml
Here we use a different template to produce "marker" data for Google Maps. Note that the data sent is the same ("Model" is doing the same thing). The "Controller" would be calling a different view based upon a URL pattern.
The result:
The Template Toolkit is a fast, powerful and easily extensible template processing system.
The template that will display the data.
Where did everything else come from? The files that our part of out Template Toolkit site are:
root/lib/config/* files contain definitions and configuration valuesroot/lib/site/* files define the page structureroot/src/* are the template filesttsite.css is a template file. Color and other definitions come from the config files.site/wrapper
site/html
site/layout
Alter the CGI so that it takes a template argument from PATH_INFO:
http://cscie12.dce.harvard.edu/cgi/conferences/list.cgi/conferences
And now, let's list the schools:
Alter the CGI so that it takes a template argument from PATH_INFO:
http://cscie12.dce.harvard.edu/cgi/conferences/list.cgi/schools_thumbshots
The [% INCLUDE site/thumbshots %] includes the file root/lib/site/thumbshots
Building a static site with Template Toolkit.
The templates (*.html) files in the "src" directory will be processed
and new files will be created in the "html" directory.
Directory and file structure:
ttree is the program that will recursively go through a directory and process templates. The resulting content is saved to a file in another directory.
And now look in the "html" directory:
Can process data as well.
Menu data is:
And the menu.html template is:
Course data for Faculty of Arts & Sciences is in a mysql database on minerva (username: class; database name: coursecatalog)
Mixing of concerns instead of SOC. This particular example is with PHP, but you can easily achieve "entangling of concerns" with Java (JSP), ASP, Python, or Perl. The problem is not with the language, but with the structure.
The template (departments.tpl):
Get the departments: smarty-dept.php
The template (courses.tpl):
Get the Courses for the CHEM department: smarty-courses.php?department_code=CHEM