COM531 Multimedia Technologies Lecture 1 - Module Overview An introduction to Rich Internet Applications

Contact Details Martin Doherty MS016A Tel: Ms Anne Hinds

Times and Locations Lecture Tuesday, – 11.05, Room MG122 Tutorial Tuesday, , Room MG122 Practical Monday, – 17.05, Room MG122

Online Resources Details of Module specification, learning outcomes, marking schemes and other resources can be found online here Module website Module specification mputer_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 WeekLecture Topic 1 Introduction Module Content 2 Project Management and Web Design Issues 3 Web 2.0 Authoring Tools Accessibility 4Expression Blend and Microsoft Silverlight 5Introduction to PHP 6PHP and MySQL 7 Adobe Flash and ActionScript Flash Catalyst Ajax 8 (17/03/15)NO CLASS 9Employability 31/03/ /04/13EASTER HOLIDAYS 10(14/04/15) Human Computer Interaction Evaluation 11Legal Issues 12Revision

Assignment Weighing Assignment 1 Due Tuesday 17 th February (week 4) Research Paper “Handling Multimedia on the Web” 30% Assignment 2 Due Tuesday 15 th April (week 10) Initial Planning20% Assignment 3 Due Tuesday 29 th April (week 12) Working prototype50%

Assignment Overview  CW_2015.docx CW_2015.docx

Recommended Reading Ambrose Little, J. (2009), Silverlight 3 Programmer's Reference, Wiley & Sons, ISBN (electronic bk) Gaudioso, V. (2009), Foundation Expression Blend 3 with Silverlight, Friends of Ed, 1st edition, ISBN McDonald, M. (2010), Pro Silverlight 4 in C#, ISBN Albert, C. and LaVigne, F. (2010), Microsoft Silverlight 4 Business Application Development: Beginners Guide, Packt Publishing, ISBN Welling, L. and Thomson, L. (2009), PHP and MySQL Web Development, Fourth Edition, Pearson Education Inc., ISBN

Recommended Reading - Journals IEEE Multimedia IEEE Transactions on multimedia ACM Multimedia systems

Recommended sites Macromedia Resources Accessibility TechDis Microsoft Silverlight

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 - and file transfer for other institutions NSFnet 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 Web A possible solution to the proliferation of different protocols being used on the Internet Origins - Tim Berners-Lee at CERN proposed the Web in 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 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)

URLs General 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 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 Protocol The 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/ OK Date: Sat, 25 July :15:11 GMT Server: Apache /2.2.3 (CentOS) Last-modified: Tues, 18 May :38:38 GMT Etag: "1b a-3dab592dc9f80" Accept-ranges: bytes Content-length: 364 Connection: close Content-type: text/html, charset=UTF-8 Both request headers and response headers must be followed by a blank line

Security There 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

Security The 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 Selection2. 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:

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

XHTML To 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

XML A meta-markup language, used to create a new markup language for 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 JavaScript A 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, interactivity and 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

PHP A server-side scripting language Similar to JavaScript Great for form processing and database access through the Web

Ajax Asynchronous JavaScript + XML No 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.NET Does 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 Ruby A 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

Rails A 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