COM531 Multimedia Technologies

Lecture 1 - Module Overview

An introduction to Rich Internet Applications

Contact Details

Martin Doherty

MS016A

Email: m.doherty@ulster.ac.uk

Tel: 028 7167 5552

Ms Anne Hinds

Email: a.hinds@ulster.ac.uk

Times and Locations

Lecture

Tuesday, 09.15 – 11.05, Room MG122 Tutorial

Tuesday, 11.15 - 12.05, Room MG122 Practical

Monday, 12.15 – 17.05, Room MG122

Online Resources

Details of Module specification, learning outcomes, marking schemes and other

resources can be found online here

Module websitehttp://scisweb.ulster.ac.uk/~martin/

Module specificationhttp://cis.ulster.ac.uk/images/Courses/UG/MultimediaComputer_Games/com531.pdf

Module Aims

To provide students with the multimedia authoring/scripting skills necessary for designing and implementing rich internet applications

To provide students with the skills to integrate complex dynamic databases with intuitive front end user interfaces using multimedia technologies

To encourage a dynamic approach to authoring responsive interactive applications

Module Schedule

*Proposed sequence of topic presentation, circumstances permitting

Week Lecture Topic1 Introduction

Module Content2 Project Management and Web Design

Issues3 Web 2.0 Authoring Tools

Accessibility4 Expression Blend and Microsoft Silverlight

5 Introduction to PHP6 PHP and MySQL7 Adobe Flash and ActionScript

Flash CatalystAjax

8 (17/03/15) NO CLASS9 Employability31/03/13 + 07/04/13 EASTER HOLIDAYS

10(14/04/15) Human Computer InteractionEvaluation

11 Legal Issues12 Revision

Assignment WeighingAssignment 1

Due Tuesday 17th February

(week 4)

Research Paper

“Handling Multimedia on the Web”

30%

Assignment 2

Due Tuesday 15th April

(week 10)

Initial Planning 20%

Assignment 3

Due Tuesday 29th April

(week 12)

Working prototype 50%

Assignment Overview

http://scisweb.ulster.ac.uk/~martin/COM531/CW_2015.docx

Recommended Reading Ambrose Little, J. (2009), Silverlight 3 Programmer's Reference, Wiley &

Sons, ISBN 9786612274015 (electronic bk)

Gaudioso, V. (2009), Foundation Expression Blend 3 with Silverlight, Friends of Ed, 1st edition, ISBN 978-1430219507

McDonald, M. (2010), Pro Silverlight 4 in C#, ISBN 9781430229797

Albert, C. and LaVigne, F. (2010), Microsoft Silverlight 4 Business Application Development: Beginners Guide, Packt Publishing, ISBN 9781847199768

Welling, L. and Thomson, L. (2009), PHP and MySQL Web Development, Fourth Edition, Pearson Education Inc., ISBN 0-672-32916-6

Recommended Reading - Journals

IEEE Multimedia IEEE Transactions on multimedia ACM Multimedia systems

Recommended sites Macromedia Resources

http://www.adobe.com

http://www.adobe.com/products/flash/flashpro

http://www.flashkit.com Accessibility

http://www.webaim.org/howto/flash TechDis

www.techdis.ac.uk Microsoft Silverlight

http://www.silverlight.net

http://www.lynda.com/search?q=Silverlight&x=0&y=0

www.microsoft.com/expression

A Brief Introduction to the Internet

Origins ARPAnet - late 1960s and early 1970s - Network reliability - For ARPA-funded research organizations

BITnet, CSnet - late 1970s & early 1980s - email and file transfer for other institutions NSFnet - 1986 - Originally for non-DOD funded places - Initially connected five supercomputer centers - By 1990, it had replaced ARPAnet for non-military uses - Soon became the network for all (by the early 1990s)NSFnet eventually became known as the Internet

What the Internet is:A world-wide network of computer networks based on TCP/IP protocols (TCP/IP hides the differences among devices connected to the Internet )

A Brief Introduction to the Internet (2)

Internet Protocol (IP) Addresses - Every node has a unique numeric address - Form: 32-bit binary number - New standard, IPv6, has 128 bits (1998)

Organizations are assigned groups of IPs for their computers

Domain names - Form: host-name.domain-names

- DNS servers - convert fully qualified domain names to IPs

Problem: By the mid-1980s, several different protocols had been invented and were being used on the Internet, all with different user interfaces (Telnet, FTP, Usenet, mailto)

The World-Wide WebA possible solution to the proliferation of different protocols being used on the Internet

Origins- Tim Berners-Lee at CERN proposed the Web in 1989- Purpose: to allow scientists to have access to many databases of scientific work through their own computers

Document form: hypertext

- Pages? Documents? Resources? - We’ll call them documents

- Hypermedia – more than just text – images, sound, etc.

Web or Internet?The Web uses one of the protocols, http, that runs on the Internet--there are several others (telnet, mailto, etc.)

Web Browsers Mosaic - NCSA (Univ. of Illinois), in early 1993 - First to use a GUI, led to explosion of Web use - Initially for X-Windows, under UNIX, but was ported to other platforms by late 1993

Browsers are clients - always initiate, servers react (although sometimes servers require responses)

Most requests are for existing documents, using HyperText Transfer Protocol (HTTP)

But some requests are for program execution, with the output being returned as a document

Web Servers

All communications between browsers and servers use Hypertext Transfer Protocol (HTTP)

Provide responses to browser requests, either existing documents or dynamically built documents

Browser-server connection is now maintained through more than one request-response cycle

Web servers run as background processes in the operating system

Monitor a communications port on the host, accepting HTTP messages when they appear

Web servers have two main directories:

1. Document root (servable documents) 2. Server root (server system software)

URLsGeneral form:

scheme:object-address

The scheme is often a communications protocol, such as telnet or ftp

For the http protocol, the object-address is: fully qualified domain name/doc path

For the file protocol, only the doc path is needed

Host name may include a port number, as in zeppo:80 (80 is the default, so this is silly)

URLs cannot include spaces or any of a collection of other special characters (semicolons, colons, ...)

The doc path may be abbreviated as a partial path

The rest is furnished by the server configuration, if the doc path ends with a slash, it means it is a directory

Multipurpose Internet Mail Extensions (MIME)

Originally developed for email Used to specify to the browser the form of a file returned by the server (attached by the server to the beginning of the document)

Type specifications - Form: type/subtype - Examples: text/plain, text/html, image/gif, image/jpeg

Server gets type from the requested file name’s suffix (.html implies text/html)

Browser gets the type explicitly from the server

Experimental types

- Subtype begins with x- e.g., video/x-msvideo

Experimental types require the server to send a helper application or plug-in so the browser can deal with the file

The HyperText Transfer ProtocolThe protocol used by ALL Web communications

Request Phase

Form: HTTP method domain part of URL HTTP ver. Header fields blank line Message body

An example of the first line of a request: GET /cs.uccp.edu/degrees.html HTTP/1.1

Most commonly used methods: GET - Fetch a document POST - Execute the document, using the data in body HEAD - Fetch just the header of the document PUT - Store a new document on the server DELETE - Remove a document from the server

The HyperText Transfer Protocol (2)

Four categories of header fields:

General, request, response, & entity

An example of a complete response header:

HTTP/1.1 200 OKDate: Sat, 25 July 2009 20:15:11 GMTServer: Apache /2.2.3 (CentOS)Last-modified: Tues, 18 May 2004 16:38:38 GMTEtag: "1b48098-16a-3dab592dc9f80"Accept-ranges: bytesContent-length: 364Connection: closeContent-type: text/html, charset=UTF-8

Both request headers and response headers must be followed by a blank line

SecurityThere are many kinds of security problems with the Internet and the Web

One fundamental problem is getting data between a browser and a server without it being intercepted or corrupted in the process

Security issues for a communication between a browser and a server: (e.g. credit card)

1. Privacy – it must not be possible for the credit card number to be stolen on its way to the company’s server

2. Integrity – it must not be possible for the credit card number to be modified on its way to the company’s server

3. Authentication – it must be possible for both the purchaser and the seller to be certain of each other’s identity

4. Nonrepudiation – it must be possible to prove legally that the message was actually sent and received

SecurityThe basic tool to support privacy and integrity is encryption

If the sender and the receiver both use the same encryption key, the key must be transmitted from the sender to the receiver

Solution: (1976, Diffie and Hellman) - Public-key encryption

Use a public/private key pair•Everyone uses your public key to encrypt messages sent to you•You decrypt them with your matching private key•It works because it is virtually impossible to compute the private key from a given public key

RSA (Ron Rivest, Adi Shamir, Leonard Adleman, 1977) is the most widely used public-key algorithm

Security

Another security problem: destruction of data on computers connected to the Internet

Another - Viruses and worms

Yet another common security problem: Denial-of-Service (DoS) - created by flooding a Web server with requests – often using networks of virally infected ‘zombie’ computers

Rich Internet Applications

Technologies that go beyond the aging HTML standard

- Idea of a “rich client”, a user interface that is more robust, responsive, and visually interesting than what can be achieved with HTML

- Rich Internet Application (RIA) technologies allow the deployment of rich clients over the internet with Web-like simplicity

- RIAs use client-side rendering engines that can present very dense, responsive, and graphically rich user interfaces

- Offering a wider variety of controls (sliders, date pickers, windows, tabs, etc.)

- Data can be cached in the client, allowing a vastly more responsive user interface and fewer round trips to the server than with HTML

Traditional approach

1. Initial Selection 2. Available Flights 3. Confirm Flights

4.Details 5. Credit card entry 6. Confirmation

Rich Internet Applications

Typical architecture

Typical architecture for an RIA where XML is generally used as the data transfer format

Client usually stays connected to the data source, so server updates client in real time

Access to database is accomplished with Web service calls

Rich Client Technologies

For further examples, see:www.silverlight.net/showcase/category/rich-media

Web Developer Toolkit - HTML

HTML-based applications became popular because the cost of deployment was low and the architecture was simple

HTML was trivially easy to learn and use Trade-off between user interface functionality against

immediate access to new data and applications Some applications not suited to HTML implementation and

may require several page redraws to complete a transaction Leads to unacceptably slow interaction In addition in HTML even simple interactivity can require a lot

of scripting to get the job done Browsers still limited by name/value pairs

XHTMLTo describe the general form and layout of documents

An XHTML document is a mix of content and controls

Controls are tags and their attributes - Tags often delimit content and specify something about how the content should be arranged in the document - Attributes provide additional information about the content of a tag

Tools for creating XHTML documents

XHTML editors - make document creation easier - Shortcuts to typing tag names, spell-checker

WYSIWYG XHTML editors (Frontpage, Dreamweaver) - Need not know XHTML to create XHTML documents

Plug ins - Integrated into tools like word processors effectively converting them to WYSIWYG XHTML editors

Filters - Convert documents in other formats to XHTML

Advantages of both filters and plug-ins:

Existing documents produced with other tools can be converted to XHTML documents

Use a tool you already know to produce XHTML Disadvantages of both filters and plug-ins:

XHTML output of both is not perfect – must be fine tuned

XHTML may be non-standard

You have two versions of the document, which are difficult to synchronize

XMLA meta-markup language, used to create a new markup languagefor a particular purpose or area

As the tags are designed for a specific area, they can be meaningful

No presentation details

A simple and universal way of representing and transmitting data of any textual kind

JavaScriptA client-side XHTML-embedded scripting language, only related to Java through syntax

Dynamically typed and not object-oriented

Provides a way to access elements of XHTML documents and dynamically change them

Macromedia Flash

Macromedia Flash is a mature commercial product for bringing interactive graphics to Web pages

A system for building and displaying text, graphics, sound, interactivityand animation (movies) - includes features for building forms-style applications

Supports both motion and shape animation

Interactivity is supported with ActionScript

-Widely deployed front-end technology on the Web, claiming up to 98% penetration across all desktops

Two parts: 1. Authoring environment 2. Player

PHPA server-side scripting language

Similar to JavaScript

Great for form processing and database access through the Web

AjaxAsynchronous JavaScript + XMLNo new technologies or languages

Much faster for Web applications that have extensive user/server interactions

Uses asynchronous requests to the server

Requests and receives small parts of documents, resulting in much faster responses

Java Web Software

Java allows creation of complex client applications

Main drawback of using Java for rich clients is its complexity (even simple forms and graphics require dozens of lines of complex code)

- Servlets – server-side Java classes

- JavaServer Pages (JSP) – a Java-based approach to server-side scripting - An alternative to servlets

- JavaServer Faces – adds an event-driven interface model on JSP

ASP.NETDoes what JSP and JSF do, but in the .NET environment

Allows any .NET language to be used as a server-side scripting language

ASP.NET documents are compiled into classes

RubyA pure object-oriented interpreted scripting language

Every data value is an object, and all operations are via method calls

Most operators can be redefined by the user Both classes and objects are dynamic

Variables are all type-less references to objects

RailsA development framework for Web-based applications

Particularly useful for Web applications that access databases

Written in Ruby and uses Ruby as its primary user language

Based on the Model-View-Controller (MVC) architecture

Silverlight

Offers a new set of features for building light-weight, sandboxed companion experiences for the Web that run on the desktop

Enables the application to be placed in a restricted store on the user’s machine; and then provide a link directly to it from the user’s desktop or start menu. An application can now be easily found on the user’s desktop or start menu, and launched with a single click

It can test if the network is connected, it can update itself, and can also have access to Isolated Storage

Tools applied in COM531

Microsoft Expression Blend Microsoft Silverlight PHP and MySQL

Others of interest but not included directly are Adobe (Macromedia) Flash, Actionscript, Flash Catalyst