kingston university multimedia production - session 2: layers of technology
DESCRIPTION
TRANSCRIPT
![Page 2: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/2.jpg)
This is digital media
![Page 3: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/3.jpg)
The technology that drives digital media
![Page 4: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/4.jpg)
evolution
![Page 5: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/5.jpg)
Each generation of online technology builds on previous generations
![Page 6: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/6.jpg)
Example:
![Page 7: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/7.jpg)
![Page 8: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/8.jpg)
physical network layer:
![Page 9: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/9.jpg)
hardware layer: servers & computers
![Page 10: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/10.jpg)
network layer: TCP/IP
![Page 11: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/11.jpg)
protocols layer: HTTP
![Page 12: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/12.jpg)
server software layer: Apache, IIS
![Page 13: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/13.jpg)
data layer: databases, XML
![Page 14: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/14.jpg)
browser layer:
![Page 15: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/15.jpg)
content structure layer: XHTML
![Page 16: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/16.jpg)
content style layer: CSS
![Page 17: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/17.jpg)
dynamic layer: Document Object Model + JavaScript
![Page 18: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/18.jpg)
extension layer: Media (Video, audio)
Interactivity (Flash, Silverlight)Functionality (Add-Ins,
Extensions)
![Page 19: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/19.jpg)
![Page 20: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/20.jpg)
1. HTML/CSS2. Frontend scripting3. Backend development4. Content management5. Server administration6. Flash development7. Content and assets
Web development
![Page 21: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/21.jpg)
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
![Page 22: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/22.jpg)
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
![Page 23: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/23.jpg)
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" />, ....
……
![Page 24: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/24.jpg)
E-commerce: Amazon.co.uk
![Page 25: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/25.jpg)
Communitites: last.fm/user/petterww
![Page 26: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/26.jpg)
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
![Page 27: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/27.jpg)
27Campaigns: Get the glass
![Page 28: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/28.jpg)
28
Example 3 – Dynamic HTML
• Manipulating the HTML and browser with JavaScript– Rich interfaces and AJAX– Enabled web applications
![Page 29: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/29.jpg)
Web applications: Google calendar
![Page 30: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/30.jpg)
From browser to server return
![Page 31: Kingston University Multimedia Production - Session 2: Layers of technology](https://reader034.vdocuments.net/reader034/viewer/2022051610/5484eae5b4af9fdc728b47ce/html5/thumbnails/31.jpg)
Publish your own index.html page
http://sites.google.com/site/multimediaproduction10