Transcript Powerpoint
Integration Week 7 LBSC 690 Information Technology Agenda • Questions • The grand plan • Media synchronization • Cold Fusion • Midterm review The Grand Plan Computers Web Networks Search XML Integration Interaction Multimedia Midterm Communication Programming Policy Databases Life Cycle 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 media7.umd.edu (128.8.225.222) Web Browser Microsoft Access Cold Fusion Server .mdb file “Mapping” a “network drive” On Windows Explorer: Tools->Map Network Drive->Browse Your Computer Cold Fusion Markup Language <html> <head> <cfinput Name=… DataSource=…> SQL Command </cfinput> </head> <body> <cfoutput Query=…> Value1: #value1# Value2: #value2# </cfoutput> </body> </html> All the files have extension .cfm CFQUERY and CFOUTPUT <HTML> <HEAD> <TITLE>Show All Students in Our School</TITLE> <CFQUERY NAME=“allStudents” DATASOURCE=“student20”> SELECT * FROM Students </CFQUERY> Must be the same name </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"> CF variables <PRE> #studentID# #FirstName# #MiddleName# #LastName# </PRE> </CFOUTPUT> <FORM ACTION="mainMenu.cfm" Method="post"> <input type="submit" value="Main Menu"> </FORM> </BODY> </HTML> http://128.8.225.222/students/student20/students.cfm 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 High level, abstract Human Human Multimedia Information Database Information Exchange Programming Integration, SMIL Integration, ColdFusion Web Pages HTML Encoding Information XML World Wide Web Computer System Computer System Internet Low level, specific 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 • The Web – HTTP, HTML, URL • XML – DTD, XSL, XLink My Browser Multimedia • Compression, compression, compression – – – – Image: lossy vs loseless Video: frames are alike Speech: voice predictable Music: masking • Streaming Buffer Media Sever Internet 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