Multimedia production<br />Feb 2010 | p.warnsberg@kingston.ac.uk | www.twitter.com/petterw<br />
This is digital media<br />
The technology that drives digital media<br />
evolution<br />
Each generation of online technology builds on previous generations<br />
Example:<br />
physical network layer:<br />
hardware layer: servers & computers<br />
network layer: TCP/IP<br />
protocols layer: HTTP<br />
server software layer: Apache, IIS<br />
data layer: databases, XML<br />
browser layer: <br />
content structure layer: XHTML<br />
content style layer: CSS<br />
dynamic layer: Document Object Model + JavaScript<br />
extension layer: Media (Video, audio) Interactivity (Flash, Silverlight)Functionality (Add-Ins, Extensions)<br />
Web development<br />1. HTML/CSS<br />2. Frontend scripting<br />3. Backend development4. Content management5. Server admi...
Content of module<br />HTML<br />Describe the content so that machines knows what it is<br />CSS<br />Style the content so...
Production workflow
Web design</li></li></ul><li>22<br />Example 1<br />A typical web page contains:<br />HTML instructions<br />Style sheets<...
23<br />Example 1 – HTML code (see example on StudySpace)<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&...
E-commerce: Amazon.co.uk<br />
Communitites: last.fm/user/petterww<br />
26<br />Example 2 – Flash movies<br />A Flash Movie that runs within a Web browser plug-in embedded with HTML<br />Flash M...
27<br />Campaigns: Get the glass<br />
28<br />Example 3 – Dynamic HTML<br />Manipulating the HTML and browser with JavaScript<br />Rich interfaces and AJAX<br /...
Web applications: Google calendar<br />
From browser to server return<br />
Publish your own index.html page<br />http://sites.google.com/site/multimediaproduction10<br />
Upcoming SlideShare
Loading in …5
×

Kingston University Multimedia Production - Session 2: Layers of technology

750 views

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
750
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • The layers of technology that supports today&amp;apos;s online solutions have built up over time, an evolutionlong way since 95 when I built my first HTML website
  • Tencent Based on Trident (IE), big in ChinaMaxthon Big in China (200m dl)Flock – social browser
  • JavaScript, Flash, Search Engine
  • Traditional web development
  • .
  • Kingston University Multimedia Production - Session 2: Layers of technology

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

    ×