kingston university multimedia production - session 2: layers of technology
Post on 08-Dec-2014
827 Views
Preview:
DESCRIPTION
TRANSCRIPT
Multimedia production
Feb 2010 | p.warnsberg@kingston.ac.uk | www.twitter.com/petterw
This is digital media
The technology that drives digital media
evolution
Each generation of online technology builds on previous generations
Example:
physical network layer:
hardware layer: servers & computers
network layer: TCP/IP
protocols layer: HTTP
server software layer: Apache, IIS
data layer: databases, XML
browser layer:
content structure layer: XHTML
content style layer: CSS
dynamic layer: Document Object Model + JavaScript
extension layer: Media (Video, audio)
Interactivity (Flash, Silverlight)Functionality (Add-Ins,
Extensions)
1. HTML/CSS2. Frontend scripting3. Backend development4. Content management5. Server administration6. Flash development7. Content and assets
Web development
Content of module
HTML
Describe the content so that machines knows what it is
CSS
Style the content so that humans can easily take it in
Flash
Make it interactive and living
Design process
Make it great:-Usability-Production workflow-Web design
22
Example 1
• A typical web page contains:– HTML instructions– Style sheets
• Colors, fonts, sizes, styles etc.
• Images, animated GIF images, objects, …
– Javascriptshtml_example.htm
23
Example 1 – HTML code (see example on StudySpace)
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title> A Shooting Game - ex09-09.htm </title></head>
<style>
.tx01St={font-family:arial;font-size:18pt;font-weight:bold}
.butSt{background-color:#dddddd;font-family:arial;font-weight:bold;
font-size:18pt;color:#880000;width:60px;height:40px}
.butSt1{background-color:#aaffaa;font-family:arial;font-weight:bold;
font-size:18pt;color:#880000;width:110px;height:40px}
</style>
<body style="background:#dddddd;font-family:arial;font-size:20pt;
color:#000088;font-weight:bold">
<div style="position:absolute;top:15px;left:150px">HTML Example - A Shooting Game</div>
<img src="line1.gif" style="position:absolute;
top:50px;left:150px;width:380px;height:6px" />, ....
……
E-commerce: Amazon.co.uk
Communitites: last.fm/user/petterww
26
Example 2 – Flash movies
• A Flash Movie that runs within a Web browser plug-in embedded with HTML– Flash Movies written separately– A Flash SWF file is downloaded along with a
Web page from a Web server, but the Flash itself runs on the user’s computer
27Campaigns: Get the glass
28
Example 3 – Dynamic HTML
• Manipulating the HTML and browser with JavaScript– Rich interfaces and AJAX– Enabled web applications
Web applications: Google calendar
From browser to server return
Publish your own index.html page
http://sites.google.com/site/multimediaproduction10
Keep on trucking
p.warnsberg@kingston.ac.uk | http://twitter.com/petterw
top related