Integration
Week 7
LBSC 690
Information Technology
Agenda
•	Questions

•	The grand plan

•	Media synchronization

•	Cold Fusion

•	Midterm review
The Grand Plan
Narrated PowerPoint
•	Create your slides

•	Slide Show -> Record Narration
–	Set microphone level

•	Record the narration
–	Slide transitions are automatically captured

•	Narration plays automatically when displayed
Adding Video to PowerPoint
•	Insert->Movies and Sounds
–	Movies from file (a .mpg file)

•	Decide whether you want autostart
–	If not, it starts when you click on it
Illustrating RealAudio
•	Create a .ram file
–	URL for the RealAudio
–	Dimensions of the picture
–	URL for the picture

http://www.glue.umd.edu/~oard/teaching/690/fall03/notes/690f037/media.html
Synchronizing Multiple Media
•	Scripting Languages
–	Synchronized Multimedia Integration Language (SMIL)

•	Custom applications
–	Macromedia Flash

•	Content representation standards
–	MPEG 4
SMILe
•	Standards: W3C backup
•	Extensions: individual player company
–	We only show examples for realone player
•	Structure like HTML
<smil>
<head> … </head>
<body> … </body>
</smil>
Elements in SMIL
•	Controls on two-dimension window
–	Layout: <region> ,<root-layout>
–	Stated in <head> section
•	Controls on time line
–	Sequence: <seq>, <excl>, <par>
–	Timing: <begin>, <end>, <dur> 
–	Stated in <body> section
•	Content types
–	<audio>, <video>, <img>, <ref>
–	Stated in <body> section
SMIL Examples
•	Implemented in RealOne Player
•	Example:
http://www.glue.umd.edu/~oard/teaching/690/fall03/notes/690f037/media.html
–	First, View the executable
–	Then, View smil file

Hands on Point: Add some fun
•	Add following to previous example
•	First play the original, then the new
<par> 
    <ref src="http://glue.umd.edu/~rba/MEDIA/audio/20th.wav" /> 
   <seq> 
          <img src="http://glue.umd.edu/~rba/MEDIA/images/thomas.gif" dur="5s" region="pix_region" /> 
           <img src="http://glue.umd.edu/~rba/MEDIA/images/clisbtn.gif" dur="5s" region="pix_region" /> 
          <img src="http://glue.umd.edu/~rba/MEDIA/images/webglobe.gif" region="pix_region" fill="freeze" /> 
  </seq> 
</par> 
Discussion Point:
Generating SMIL with a Program
•	File input and output

•	Iteration and arrays

•	Sequential execution
Ways of Generating Web Pages
•	Written in a markup language
–	HTML, XML

•	Generated the HTML using a programs
–	Common Gateway Interface (.cgi)
–	Active Server Pages (.asp)

•	Generate the HTML using a database
–	Cold Fusion (.cfm)
–	PHP Hypertext Processor (.php)
Why Database-Generated Pages?
•	Remote access to a database 
–	Client does not need the database software

•	Serve rapidly changing information
–	e.g., Airline reservation systems

•	Provide multiple “access points”
–	By subject, by date, by author, …

•	Record user responses in the database
Two Ways to Use a Database
Cold Fusion Markup Language
<html>
<head>
  <cfinput Name=… DataSource=…> 
	  SQL Command
  </cfinput>
</head>
<body>
  <cfoutput Query=…>
	  Value1: #value1#
      Value2: #value2#
  </cfoutput>
</body>
</html>
CFQUERY and CFOUTPUT
<HTML> 
<HEAD> 
<TITLE>Show All Students in Our School</TITLE> 
<CFQUERY NAME=“allStudents” DATASOURCE=“student20”> 
		SELECT * FROM Students 
	</CFQUERY> 
	</HEAD> 
	<BODY BGCOLOR="LIGHTBLUE">
	 	<H2> <B>All Students in Our School</B> </H2>
	 	<BR> <hr> <pre> studentID FirstName MiddleName LastName<br></pre>
		 <CFOUTPUT QUERY="allStudents"> 
		<PRE> 
		#studentID# #FirstName# #MiddleName# #LastName# 	
		</PRE> 
		</CFOUTPUT> 
		<FORM ACTION="mainMenu.cfm" Method="post"> 
		<input type="submit" value="Main Menu"> 
		</FORM> 
	</BODY> </HTML> 

ColdFusion Table
•	Show all books http://128.8.225.222/students/student20/books.cfm

<CFTABLE QUERY="allBooks" startrow="1" colspacing="1" htmltable colheaders> 
<CFCOL HEADER="<B>BookID</B>" ALIGN="left" WIDTH="8" TEXT="#BookID#"> 
<CFCOL HEADER="<B>Title</B>" ALIGN="left" WIDTH="40" TEXT="#Title#"> 
<CFCOL HEADER="<B>Author</B>" ALIGN="left" WIDTH="18" TEXT="#Author#"> 
<CFCOL HEADER="<B>ISBN</B>" ALIGN="left" WIDTH="15" TEXT="#ISBN#"> 
</CFTABLE>
SQL in ColdFusion
•	Show who borrowed which book http://128.8.225.222/students/student20/borrow.cfm

<CFQUERY name="borrowedBook" dataSource="student20"> 
    SELECT Books.Title, Students.FirstName, Students.MiddleName,     	 	   Students.LastName, Checkout.DueDate 
    FROM Books, Students, Checkout 
    WHERE Books.BookID=Checkout.BookID AND Students.StudentID=Checkout.StudentID;
</CFQUERY> 
Hands-On Point: 
Link Databases Using ColdFusion
•	Task 1:
–	Put plane.mdb to your Cold Fusion account using FTP
–	Download  books.cfm page to your class directory
•	rename books.html to books.cfm
–	Modify the page for the two queries in plane.dbm

•	Task 2: 
–	If you find it easy, try to connect your database homework to CF 
–	Download the two cfms in 5
–	Modify them to build a search interface
A Layered Architecture: 
Topics We Have Covered
The Midterm
•	Quiz/homework should be good preparation
–	A variety of question types
–	Some questions will require computer use

•	Lots of prior exams are available
–	Many have solutions available

•	Open book/notes/Internet/mind/…
–	Just don’t get help from another person
Computer Systems
•	Hardware 
–	Types of hardware
–	Storage hierarchy
–	Moore’s law
•	Software
–	Types of software
–	Types of interfaces
Networks
•	Types of Networks
–	LAN, WAN, Internet, Wireless
•	Packet Switching
–	Ethernet, routers, routing tables
•	Layered Architecture and protocols
–	TCP/UDP
–	IP address/domain name
•	Encryption

Structured Documents
Multimedia
Programming
•	Programming links machines & human
–	Machines require low-level specific instructions
–	Humans require high-level abstraction

•	Object models represent aspects of reality

•	Can create any behavior from 3 control structures
–	Sequential execution
–	Conditional
–	Iteration

•	Javascript interpreters are in Web browsers
–	Mozilla has javascript debugger
Databases
•	Structured information
–	Filed->record->table->database
–	Primary key is the key
•	Normalized tables (relations)
–	Remove redundancy, inconsistency, error
–	Easy update, search
•	Join links tables together
–	Through foreign key
•	Access provides visual operations
Integration
•	Multimedia
–	SMIL

•	Databases
–	Cold Fusion