Introduction to Web Based Multimedia Application Webbased application

Introduction to Web Based Multimedia Application

Web-based application • TCP/IP (HTTP) protocol • Using WWW technology & software • Distributed environment

World Wide Web • Allows users from anywhere on the internet to retrieve documents from any other computers • The main protocol is the HTTP – Hyper. Text Transfer Protocol • HTTP provides a standard form of communication between web browsers and web servers.

World Wide Web (cont. ) • Web browsers – Programs running on client computers – Request for documents using URL – eg. MS Internet Explorer, Netscape • Web servers – Programs that provide documents to browsers – eg. Apache, IIS

World Wide Web (cont. ) • URL – Uniform Resource Locator – A reference of a document on the web. – eg. http: //comp. fsksm. utm. my/index. html – http: //comp. fsksm. utm. my/images/log o. jpg

Web Architechture How the Web works for static contents (basic architecture) CGI scripts

Advantages • Easy for deployment • Standard interface (HTML) for many platform (Windows, Linux/Unix, Mac) • Distributed task

Disadvantages • Compare to standalone apps – Security prob – malicious code etc. , sensitive data – CC – Restricted for client • Sec. Cert setup etc. – Limited GUI and Interaction

Two types of application Client Side • Thick client • GUI & logic at client • Longer time to download • Example technology: Active. X, Java Applet • For application that require a lot of interaction & complex GUI • Example application: multimedia, graphic, visualization

Server Side • Thin client • GUI at client / Logic & db at server • Example application: E-commerce, online management system

Example tech. /framework • Conventional CGI – Perl, C, C++, Python, VB • Java Servlet • Enterprise Java. Beans • Server pages – ASP, PHP, JSP • Client side script – VB Script, Java. Script

Common Gateway Interface How the Web works for dynamic contents CGI Intepreter CGI scripts

HTML vs. Javascript vs. CGI • HTML – is the main language for delivering document over the web. – is the only language that web browsers can understand. • Javascript – Documents that are created by HTML are static. HTML doesn’t support logical features. – Javascript is used to make the document dynamic. – Eg. before we can perform any delete operation, the browser should ask the user first for confirmation. This cannot be done by the HTML. Javascript can. • CGI – Javascript is executed at client computers – ie. in web browsers. It is called client-side scripting language. – Databases or other resources are located at the server computer. We need another programs to access them – ie. CGI programs. – CGI languages such as PHP, JSP, Perl, etc are called server-side scripting languages, because they are executed at the server.

HTML, CSS, & Javascript PHP SQL

Multimedia Application • Combination of media – text, graphic, audio, video, animation • Very/highly interactive • Example application: corporate presentation, kiosk, CAI (training & education) • Standalone or distributed over LAN / WAN

Standalone multimedia application • CD-ROM • Installed into user computer

Distributed multimedia application • Over LAN – TCP-IP, Net. Beui, IPX/SPX protocol • Over WAN / Internet – W W W service using TCP-IP (HTTP) protocol

Web Base Multimedia Application • Distributed multimedia application (WWW service) • Using standard web base application tech. /framework such as HTML, CGI, client script for basic web function • Tech. to deliver multimedia content: shockwave components (Authorware & Director), Flash, Active X, Java Applet • Take advantage of streaming technology to deliver multimedia data (audio & video): Real. Networks technology

Example Web-Based Apps • E-Commerce – Amazon, Ebay, os. Commerce • Online Forum – php. BB, v. Bulletin • Online Blog – Blogspot • CMS – Joomla, Mambo, Lenya • Online Album – google picasa, photobucket • Video Streaming – Youtube, Quicktime movie trailer

Summary • We will learn in this class how to: – present our content for web viewing in its most simple way through (HTML code) • (En. Rosely) – systematically managing the formatting and arrangement of content in HTML through CSS • (En. Rosely) – managing event, interaction and manipulating web content (html doc) through Javascript • (En Rosely)

Summary (cont. ) • We will learn in this class how to: – managing animation through javascript, flash and shockwave, and managing video through online streaming • (En. Razak) – management of user and application data through CGI and server-pages scripting (server code encoded in html doc) • CGI-Perl (En. Razak) • Server-pages technology – PHP (En. Rosely)