Introduction to Multimedia Web Application Design and Practice

1
Introduction to Multimedia WebApplication Design
and Practice

• Presented by Chad Lou

Email ChadL_at_fox.com PhilipC_at_fox.com
2
Consumer Websites
www.foxhome.com www.marilyndvd.com www.kissofthedr
agondvd.com
3
Current Technology ReviewWhat is Hot and not Hot

• Hot
• Internet Explorer (4.0)
• Cascading Style Sheet (CSS)
• Dynamic HTML
• XML
• .NET
• C
• Dreamweaver
• Web Graphics
• round edges, div, animation, popup
• Javascript

• Traditional
• Netscape Navigator
• EJB (performance)
• Perl CGI (good for personal)
• Notepad Editor

4
J2EE vs .NET

• J2EE
• architecture
• includes Java/JSP/Servlet/EJB
• based on java
• works on most platforms
• has been around for 5 years
• current version 1.4

• .NET
• architecture or framework
• includes Visual Basic .NET, Visual C .NET,
  Visual C .NET
• based on Visual Basic, C, or Managed C
• works only on Windows platform
• was introduced one year ago
• current version 1.0

5
Database Design
Oracle vs SQL Server

• Oracle
• runs on NT/Unix/Linux
• current version 9i (RAC)
• SQL compliant
• supports PL/SQL and Java for stored procedures
• provides Enterprise Manager
• free for download
• licensing fee expensive
• supports XML, XSQL

• SQL Server
• runs on NT only (2000, XP)
• current version SQL Server 2000
• SQL compliant
• uses transact-SQL
• Server manager integrated with Windows
• free evaluation, 1500 license
• supports XML

Identify entities. Do modeling first. Normalize
tables to reduce redundancy. Then create table
with key, create sequence number for one to many
relationship, move to a different table. e.g.
cast of a movie, one movie has many cast
members cast would need to have its own
table break many-to-many relationship into two
entity tables plus one relationship table e.g.
employee and project
6
Java vs C

• Java
• based on C, C
• strongly typed
• object-oriented
• methods start with lower case letter
• classes start with upper case letter
• directory structure reflects package

• C
• based on C, C, Java
• strongly typed
• object-oriented
• methods start with upper case letter
• class start with upper case letter
• namespace does not correspond to directories

7
Java and C Examples

• Java
• import java.io.
• public class HulloWorld
• public static void main(String argv)
• System.out.println(Hullo World from Java)

• C
• using System
• using System.IO
• public class HulloWorld
• public static void Main(String argv)
• Console.WriteLine(Hullo World from C)

8
XML and XSL

• XML
• Star Wars
• Natalie Portman
• George Lucas
• 5/16/02

• XSL
• l" version"1.0" xmlnsxsl"ht
• tp//www.w3.org/1999/XSL/Transform"
• le
• Actors
• 
  
• Date

9
XML Transformation

• MSXSL
• Microsoft MSXML 4.0
• Syntax
• msxsl movie.xml movie.xsl
• Xalan
• Apache XML parser Xerces

• ORAXSL
• Oracle XML Parser v2
• bundled with Oracle 8i, 9i,
• runs inside Oracle database server
• Syntax
• oraxsl movie.xml movie.xsl

Why XML How to Convert a website to XML
Application
10
Multimedia Web Servers

• Sun Workstation
• operating system Solaris
• reliable
• runs Apache server
• good at multi-threading and multi-tasking and
  heavy load
• UI is less intuitive
• good for unattended server
• expensive
• use RAID technology
• SUN server
• need to configure streaming server

• MS 2000 Server
• NT
• more reliable than NT4
• runs IIS, or Apache Server
• multi-threading
• Server manager integrated with Windows
• excellent UI
• less expensive
• use RAID Technology 2, 5, 10
• DELL or COMPAQ server
• bundles with Streaming Server

11
Multimedia Web Design

• Dreamweaver
• web site architecture design
• can define multiple sites
• native format html
• supports database application (Ultradev)
• can do WYSIWIG or tag editing
• can interact with Fireworks
• uses template for site-wide look and feel, have
  editable region and locked region
• new MX version supports XML and ASP.NET
• competitor Frontpage

• Fireworks
• web site graphics design
• can export to different formats
• native format png
• supports animated gif
• uses vector graphics and also bitmap
• can work with Dreamweaver
• use layers for mouse-over effect, create
  navigation bar
• create thumbnails using javascript
• extension generates photo album
• competitor Photoshop

12
Multimedia Web Design

• FLASH
• interactive
• animation
• protect code
• requires browser plugin
• plugin easily downloadable
• use template and XML
• the standard for movie websites
• high-end graphics website
• DIRECTOR
• offline cdrom design

• Graphics Integration
• Many sites can be done with one person who is
  both designer and programmer
• Large sites need to be designed and integrated
• designer provides graphics
• programmer use placeholder
• data embedding using java beans or XML
• next round of integration

13
Multimedia Web Design

• Video Streaming
• ASX/ASF
• QuickTime
• Real Media
• MP3
• Microsoft Streaming Server
• bundles with Win2k Server
• capture video to avi
• avi to wmv conversion
• create asx file (xml)
• upload to web or streaming server
• ASX example

• Video Production
• shoot with camcorder
• analog or DV capture
• MPEG-1/MPEG-2/XVCD
• create menus
• add introduction video
• add background music (mp3/wav)
• create VCD using photos
• play on DVD player

14
Enterprise Development

• Application Servers
• WebLogic
• Oracle
• IBM WebSphere
• SUN iPlanet
• Dynamo
• single sign-on (setup/transfer/maintain state
  information across applications and servers)
• search engine (pagination, query of database,
  mixing with html, not a good xml application)
  (demo)

15
Web Architecture - General
Browser
Three Tiers
Technology Choices Language Database
Platform Java/J2EE Oracle
Sun/Solaris C/ASP SQL Server
Win2k PHP/Perl MySQL
Linux ASP MS Access
Win2k
HTTP GET/POST
Web Server
JDBC / ODBC / ADO
Database Server
16
Web Architecture - I
Browser
Dispatcher
Web Server II
Web Server I
Database Server
17
Web Architecture - II
Browser
Dispatcher
Web Server II
Web Server I
Database Server I
Database Server II (standby)
Email Server
18
Development Architecture Setup
Test Server
Development Server
Production Server
Data Exchange / Synchronization
How to synchronize data between different
systems o Web system o ERP system o Data
warehouse system o External vendor system
export data to Excel import data to separate
tables in database compare data in different
tables master/slave model mutual update Demo
19
Application Examples Video/DVD Catalog
SystemDigital Asset Management System

• Video/DVD Catalog
• Movie Information
• Box Office
• Theatrical Date
• Price
• Search Engine
• Keyword
• Alphabet
• Award
• Castt and Crew

• Asset Management
• Web Assets
• Retail Marketing Ads / Brochures
• Pressroom / Publicity Movie scenes
  Promotion Events Streaming Clips
• Store Pictures
• Assets by Actors
• Assets by Keyword

20
Flow of Data, Image Files to DAM
Key Art
Website Assets
Broadband Trailers, etc.
Digital Asset Management
Video/DVD Catalog
Press Room Materials
Sales Materials
Retail Assets
DVD Menus
21
Application Architecture
Web ServerNetscape iPlanet
ApplicationServer(for Admin)
DatabaseServer
Asset Server
JavaBeans
XML/XSL
How does the programming language communicate
with and update the database JDBC for
Oracle, JDBC-ODBC bridge for MS Access PL/SQL or
Java Stored Procedure for performance
22
Web Technology Used

• Languages
• Java / JSP/Servlet
• XML / XSL (enterprise apps)
• Dynamic HTML
• Dreamweaver / Fireworks
• Oracle
• PHP / Perl / MySQL (for consumer websites)
• C and .NET (future)

• Portability
• Developed in iPlanet Server.
• Ported to
• WebLogic Application Server
• Apache Server/Tomcat Server
• Oracle Application Server

23
ApplicationDemonstration
24
Q A