Transcript MT Lec12 Revision - University of Ulster

COM531 Multimedia
Technologies
Revision Slides
COM531 Multimedia
Technologies
Lecture 1 - Module Overview
An introduction to Rich Internet
Applications
The Internet
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)
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
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 used to call the content from Web Servers, i.e. Google
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
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
Transactions
must
have
Privacy,
Integrity,
Authentication,
Nonrepudiation
The basic tool to support privacy and integrity is encryption
Use a public/private key pair (1976, Diffie and Hellman)
•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
Other security problems:
Destruction of data on computers connected to the
Internet
Viruses and worms
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
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
Web Developer Toolkit












HTML
XHTML
XML
JavaScript
Macromedia Flash/Catalyst
PHP
ASP.NET
JSP
Ajax
Ruby/Rails
Expression Blend
Silverlight
COM531 Multimedia
Technologies
Lecture 2 – Project Planning,
Storyboarding and Prototyping
Project Management
A traditional approach to
managing projects


Ad-hoc approach
When things go wrong…


Work out how to turn things
back right
Why things went wrong?
A disciplined approach
to managing projects
•Consistent method
•Discipline = focus
•Repeatable process
•Achieving clearly defined goals
and objectives
Project Management - steps

Preparing: - Getting ready is the secret for success,
have a clear deliverable of the project
 Planning: - What’s to be done, Who will do it, When
should each task be performed, What will they need to
do it, How much will it cost, What happens IF?
Communicating: - What’s the best way to communicate
project details to people who have an interest in the
project? - GANTT charts, Calendars, Reports, Filters,
Wizards
 Monitoring: How is project progressing?
 Controlling: - How can project be kept on track?
 Reviewing: - Planned versus actual?

Use Project analysis form – consider objectives,
audience, production process, creative process
Storyboarding









Storyboard clearly defines all the visuals, text, animation and audio
components that will be included in each scene/page
Helps identify the elements that need to be produced for the project
Provides a basis to determine the cost estimates for the project
Detailed storyboard ensures that you and the client are in
agreement about the content of the project
Avoids costs of additional changes to the scope of the project later
on
Break content into parts that make sense to the user
Identify how the user navigates through the content
Avoid navigation errors leading the user to “dead ends”
Identify levels of content the user have to navigate
Story Boarding examples
Prototyping
Prototyping is common in almost every field of
engineering design


Purpose of prototyping
Merits of prototyping
Laying out the project


Draw in Photoshop (or similar tool)
Use rulers and guides to design the layout
of the elements
Project Management software



For large projects that involve a team, Use
project management software i.e. Microsoft
Project
Allows tracking of all the production aspects
affecting the completion of the project
MS Project slides, instructions, free tutorials
COM531 Multimedia
Technologies
Lecture 3 – Web Site Design
Planning a website
•
•
•
•
•
•
Define goals of site
Brainstorming
Narrow goals
Concepts
Implementation
Evaluation
Web design facets
Five areas cover major facets of web design
• Purpose – the reason the site exists
• Content - deals with the form, structure and
organisation of site content
• Visuals - deals with screen layout i.e. HTML &
Flash
• Technology - refers to interactive elements,
consider client side & server side scripting
• Delivery – deals with issues relating to site
reliability, platforms and download times
Site plan document
• Short goal statement
• Detailed goal
discussion
• Audience discussion
• Usage
• Content requirements
• Technical
requirements
• Visual requirements
• Delivery requirements
• Site structure diagram
• Budget
• Timescale
Helps you make decisions
Web conventions
Web conventions
Design fast loading web sites

Always be aware of download times

Minimize the use of images. Very often simple
designs are the best

Optimize images for the web

Using tables creatively can lead to interesting
designs. Tables have fast download times because
it is just HTML code
Design fast loading web sites







Don't use animated gifs unless it is necessary
Use background images instead of big
images whenever possible
Use CSS Styles to maximum effect
Use Flash sparingly
Keep checking your load time and site
performance
NetMechanic - http://www.netmechanic.com/
Free analysis of your web site
The current standard
page size was
1024x768 pixels
Based on average
screen resolutions
worldwide
Source: onestat.com
http://www.onestat.com/html/aboutu
s_pressbox43-screenresolutions.html
Consider page alignment, layout
and positioning
Viewable Browsing Area
Screen resolution wrong statistic to determine
optimum display size for Web pages.
• More appropriate metric would be viewable
browsing area
• Viewable browsing area isn't the same as
screen resolution. Many factors lead to a
discrepancy between the two measurements:
Web Hosting
Brower wars
Internet Explorer Vs Netscape Vs Firefox Vs Opera Vs Chrome Vs Safari
Search Engine Optimization




Target search engines - Yahoo, Google,
MSN
Pay per rankings
Organic ranking – based on title tag,
keywords, metadata, description, links,
reviews from other sites
Submit your site - http://www.submit-it.com/
Design Considerations






http://www.ulster.ac.uk/
http://www.manutd.com/
http://www.amazon.co.uk/
Eliminate design errors by knowing what you
like – review, review, review
Consider usability and accessibility
Keep it simple, clean, consistent
COM531 Multimedia
Technologies
Lecture 4 – Web 2.0
Authoring tools
Web 2.0
Web 2.0 examples
Folksonomy; Internet-based information retrieval methodology consisting
of collaboratively generated, open-ended labels that categorize content such as
Web pages, online photographs, and Web links.
Web 2.0: Rich user experience








Get the user to content they want
Link the user to content they might want
Don’t tell the user how to find content
Let the user decide how to use the content
Do all of the above quickly and efficiently
Transition of websites from isolated information silos to sources of
content and functionality, becoming computing platforms serving
web applications to end users
Social phenomenon embracing an approach to generating and
distributing Web content itself
Characterized by open communication, decentralization of authority,
freedom to share and re-use, and "the market as a conversation"
Authoring tools







Flash SWF
Dreamweaver (CS5 tools)
Contribute
ColdFusion
Adobe Air
Expression Blend
Catalyst
RIA Application Examples
http://www.adobe.com/resources/business/rich_internet_apps/getting_started/









Financial services
StockFetcher, an online stock screener
Startups
Scrapblog, an online multimedia scrapbook service
Picnik, an online photo editor
Retail and consumer
eBay Desktop, a desktop application from eBay
Scion, the online property for the automobile company
Sony Ericsson browser, a product selector for mobile devices
Amazon Unbox, a video download service
Media and entertainment
Amgen Tour of California, a tool for tracking a professional bicycle race
Friday Night Lights, a tool for viewing episodes of the popular NBC television series
COM531 Multimedia
Technologies
Lecture 5 – Expression Blend
and Silverlight
Usability at the fore
‘Good software is concerned with the emotions
of the person using it. It can excite the user from
time to time, but it should never frustrate the
consumer. When it’s working effectively, good
software’s unobtrusive usability brings only a
faint smile of satisfaction to its user’s lips, not
grumbles. The value of software is the value of
the experience that flows from it’
Steve White Program Manager, Microsoft Expression Blend
User needs?



According to George A. Miller (founder of the Center for Cognitive
Studies at Harvard), we have a memory capacity of 7 + –2 items
(Nelson Cowan revised this to 4 + –1 in 2000); yet, we can recall
large collections of images, especially those that form part of our
habits, which our brains are particularly fond of.
Why would you give the end user a static image button when you
could show them an animated response to their choice? Why would
the end client be happy having to rely on old data when they could
be viewing the information live and in a graphical representation?
When applications are built with the cooperation of the designer and
the application developer, the end user will have no doubts as to
what they are doing, what has just occurred, and how they should
proceed next. With WPF there is simply no excuse for not delivering
fantastic user experience – time flies when you are having fun!
Classification of tools




Expression Design or other graphic design
packages that are capable of exporting
Extensible Application Markup Language
(XAML, pronounced “zamel”).
Visual Studio for solution architecture and
.NET code requirements.
Expression Blend for the interactive
designers and XAML architects
Combination can be used for UI design
Uses of Blend



Prototyping—By creating a functional prototype using Expression Blend,
properly constructed UI solutions are available to the production cycle
immediately, providing a massive productivity gain and reducing
development lifecycles. Prototyping also removes an additional layer of
interpretation that is traditionally performed by developers that can radically
change the end user’s experience if incorrectly implemented.
UI process development—User interface processes can mean the
difference between high and low application productivity. Involving potential
end users in the design and development process is always advisable.
Being able to modify the interface to suit the users’ requirements with Blend
is certainly a benefit to the end solution.
Animation production—Blend provides a simple, easy-to-use
storyboarding mechanism for animating object properties that allows
designers to control motion and workflow while, at the same time, giving
developers a simple reference to execute when the specific animation is
required.
Uses of Blend (2)



Visual asset creation—While not a primary role for Expression Blend, the
application is stocked with enough tools to allow graphic designers to create
exceptional visual assets. Using the built-in resource management system also
allows those assets to be shared and reused with minimal work, increasing
productivity and ensuring visual continuity within the solution.
Resource file management—Blend allows you to create, modify, and utilize
templates and resources stored in the working files, the application, and/or a XAML
file called a resource dictionary. This means that one designer could create a certain
style or a specific functionality of a certain object, a button for example, and then
provide that same group of styles and functionality to everyone else working on the
solution. This is perhaps one of the most powerful features of Expression Blend.
XAML architecting—This is how Blend is used in a real-world project—a role to
which Blend is particularly well-suited. XAML architecting is about taking all the
assets from both designers and developers and putting them together. Visual Studio
plays a big part in this process as well but without Blend combining assets would be a
very difficult job indeed. This is where the power of Blend can be exploited to its
capacity.
Visual Studio v Blend



The design environment in Visual Studio is simple at best at this
stage. It contains no methods for applying animations through a
timeline interface, nor does it have a control template editor. In other
words, it is a limited design interface made for developers and not
for animators or designers
Blend is a designer’s environment that switches between both
XAML markup and .NET code in Visual Studio to allow you to apply
CLR coding requirements. Both Visual Studio (or the .NET
Framework to be more accurate) and Expression Blend share
common UI Elements. That is why we want to look at Expression
Blend as an XA’s tool.
Understanding UIElements visually is far easier than looking at a
heap of XAML markup and trying to picture it in your head.
WPF



Windows Presentation Foundation (formerly code named
Avalon) is a collection of display technologies—or a
display level subsystem—that allows developers to take
advantage of the latest graphic card hardware
acceleration features.
WPF is the father of XAML; it is what allows the XAML
language to be used in a declarative way. The term
declarative means “to describe” so XAML allows you to
describe your applications UI functionality and
components.
Through learning Expression Blend and a little .NET
code, you will have the ability to compile solutions into
either a Silverlight or desktop deliverable.
Benefits of Blend


Cool product – interesting to use
Blend, along with Visual Studio, will
absolutely be the tool of choice for the XA
because the workflow between the two
products will enable him or her to make quick
decisions, test updates, and merge new
resources into a solution. Blend becomes
more of a XAML management tool for the XA
than a visual design interface.
Blend Environment
Panels
Storyboard Environment
Microsoft Silverlight





Silverlight is a cross-browser, cross-platform plugin that
enables developers to build rich media and RIA web
experiences.
It allows developers to use .NET within the browser to
create scenarios that can’t be achieved using other web
technology, and to use high productivity tools such as
Visual Studio
It is designed to deliver media and RIAs on multiple
operating systems and web browsers
Download free from http://www.silverlight.net
Download
variety
of
libraries
from
http://www.codeplex.com/Silverlight
Silverlight Principles

With Silverlight you can write applications
that:





Deploy through a web browser
Run in a secure environment
Are visually appealing media and RIAs
Are easy to develop and maintain
Run on a variety of operating systems and web
browers
Web Deployment


Silverlight
applications
will download and launch
each time a user visits a
webpage with Silverlight
content
You
must
install
Silverlight runtime to view
Silverlight
content
–
prompted to do so when
code is launched, takes
about 10 secs
Silverlight 3 Features









Ability to write applications in a .NET language
An application model for building and deploying applications - using
common language runtime (CLR) such as C# or JavaScript on the HTML
page
A vector graphics drawing system – includes vector shapes, anti-aliasing,
images, pens, gradients, opacity effects, transforms, clipping and zoom
A text display system
An animation system – move an object, zoom the display, apply alpha fade
transition, create motion paths such as bounce and place
A layout system for arranging and resizing elements – i.e StackPanel
A set of common user interface controls – buttons, combo boxes, list boxes,
scroll viewers, text editing controls, and so on
A data-binding system for connecting data to application elements –
automatic display of live data in user interface controls
Networking libraries – HTTP requests, download compressed data, open
direct socket connections with servers
Architecture
Architecture components









Silverlight plug-in object that you host on your webpage
A downloader for downloading XAP package and any other files
referenced in XAML or code
XAML parser for instantiating the objects declared in XAML files
The .NET CLR for running application code
An event system for dispatching events to the application code
A declarative element tree that maintains the structure of the
application view
An animation system that can change values of properties over time
to create animation effects
A layout system that can position and lay out objects dynamically
based on the size of the view area and the size of content within the
layout elements
A rendering system for drawing application contents to the screen
COM531 Multimedia
Technologies
Lecture 6 – Flash and
ActionScript
Managing Flash Projects

Scenes

Divide timeline into manageable sections
e.g. Introduction, conclusion, index, etc.


Useful for long/complex movies
Libraries


Organise assets using folders
Share assets between projects


e.g. logos, audio/video
Movie Explorer


Overview of project structure
Access and edit assets
Publish Settings

Select formats for publication



Configure settings for each format






Range of formats supported
Flash, HTML, GIF, QuickTime…
Filenames
Alignment
Size
Looping
Quality
Publish preview for each format

Test appearance and functionality
Publish as HTML


HTML is native language of web
Flash can automatically create HTML


Based on range of built-in templates
HTML produced not always appropriate

Change HTML of each page


Manually or with an authoring tool
Customise Flash templates

Affects all published pages
Object-Oriented Scripting
•
ActionScript is an object-oriented scripting
language
•
Scripting languages organise information into
groups called classes
•
Classes and objects are just ways to group
together chunks of information
ActionScript




Scripting language used in Flash to create advanced
interactivity and animation
Allows the execution of different actions in a movie depending
on what a user does or on what frame of the movie is being
played
Similar structure and syntax to JavaScript
Example script:
Event
Action
Target
on (press) {
setProperty ("MyTarget", _height, "100");
}
100
MyTarget
50
MyTarget
Events

Events call an action



Mouse events


Mouse movement, button clicks
Keyboard events


Dependent on user activity or autonomous
Single event can trigger multiple actions
Keystrokes, text entry
Frame events


Occur automatically on entering frame
Attached to timeline of movie or movie-clip
Actions

Wide range of pre-defined actions

Movie control


Movie Clip control



Stop, play, go to frame, etc.
Set property, play/stop, etc.
Parameters can be customised
Actions can be:


Performed on multiple targets
Conditional (If, then, else…)
Targets
Target is object on which action is performed




Current movie
Movie-clip instances
External applications – e.g. browsers
Defining targets



If no target defined action
affects current object
Movie clip instances
require unique name
Define path from
current object to target
myTarget3

myTarget2
myTarget1
Object Actions Drag fish
Methods
A method is something an object can do or something
you can do to an object. For example, here are some
things methods can do:





Stop a movie clip
Go to a certain frame and start playing there
See if a movie clip is over another movie clip
Hide the mouse cursor
Set the volume of a sound being played
Object actions: onClipEvent
Object actions on a movie clip have to be inside of an
onClipEvent. Possible events are:
 load
 unload
 enterFrame
 mouseMove
 mouseDown
 mouseUp
 keyDown
 keyUp
Object Actions Buttons
The events for on are:
 press
 release
 releaseOutside
 rollOver
 rollOut
 dragOver
 dragOut
 keyPress
Frame Actions


Frame actions are like object actions, except
that the actions are associated with a certain
spot in the timeline instead of an object
If a frame has some actions associated with
it, those actions are carried when the
playhead enters that frame
COM531 Multimedia
Technologies
Lecture 7 – Flash Catalyst
Ajax
Features








Flash Catalyst can import Adobe Photoshop, Adobe Illustrator,
or Adobe Fireworks files keeping all their features
Convert artwork into functional UI components (creating Flex
component skins)
Create and edit behaviours (mouse event handling, etc.) without
writing code
Create animated transitions
Return to Photoshop or Illustrator to modify the artwork, while
preserving the behaviours, animation, etc. that were created in
Catalyst
Create UIs to handle dynamic data without having access to the
actual data source
Use design-time data placeholders when marking up an application,
testing interactivity, and choreographing motion
Compatible with Flash Builder (formerly called "Flex Builder"), using
the same project format
Flash Builder





Adobe Flash Builder (previously known as Adobe Flex Builder)[3] is
an integrated development environment (IDE) built on the Eclipse platform
and speeds development of RIAs and cross-platform desktop applications,
particularly for the Adobe Flash platform
Adobe
Flash
Builder
offers
built-in
code
editors
for MXML (Macromedia/Magic) and ActionScript and a WYSIWYG editor for
modifying MXML applications
It includes an interactive debugger allowing developers to step through code
execution while inspecting variables and watching expressions
It contains added support for performance analysis. The profiling view
displays statistical information about memory use in addition to function call
execution time
Prior to version 4, this product was known as Flex Builder. The name
change is meant to signify its connection to other products in the Adobe
Flash Platform and to create a clear distinction between the Flex SDK and
the IDE
Flex SDK




Adobe Flex is a software development kit (SDK) for the development and
deployment of cross-platform RIAs based on the Adobe Flash platform. Flex
applications can be written using Adobe Flash Builder or by using the freely
available Flex compiler from Adobe
In March 2004 Macromedia release included an SDK, an Integrated
development environment (IDE), and a Java EE (Enterprise
Edition) integration application known as Flex Data Services (now a
separate product rebranded as LiveCycle Data Services
An alternative to Adobe LiveCycle Data Services is BlazeDS, an opensource project that started with code contributed in 2007 by Adobe
In February 2008, Adobe released the Flex 3 SDK under the open
source Mozilla Public License and so Flex applications can be developed
using any standard IDE, for example Eclipse
Eclipse



Eclipse is an open source community whose projects are focused on
building an extensible development platform, runtimes and application
frameworks for building, deploying and managing software across the entire
software lifecycle
Eclipse is a multi-language software development environment comprising
an integrated development environment (IDE) and an extensible plug-in
system. It is written mostly in Java and can be used to develop applications
in Java and, by means of various plug-ins, other programming languages
including Ada, C, C++, COBOL, Perl, PHP, Python, Ruby (including Ruby
on Rails framework), Scala, Clojure, Scheme
The IDE is often called Eclipse ADT for Ada, Eclipse CDT for C/C++,
Eclipse JDT for Java, and Eclipse PDT for PH
Ajax
Two events ignited widespread interest in Ajax:
1. Google made a wide deployment of Ajax with Gmail (2004)
and Google Maps (2005)
2. The term Ajax was coined on February 18, 2005 by Jesse James
Garrett in an article entitled Ajax: A New Approach to Web
Applications.


Goal of Ajax is to provide Web-based applications
responsiveness approaching that of desk-top applications
with
The Basics of Ajax
Described through a very simple application
The application: Helps the user fill a form
The form gathers client information; asks for the zip code before the names of the
city and state
As soon as the zip code is entered, the application sends a request to the server,
which looks up the city and state for the given zip code and returns them to the form
• Uses JavaScript to put the city and state names in the form
• Uses PHP on the server to look up the city and state
The form
• Must reference the JavaScript code file in its head
• Must register an event handler on the blur event of the zip code text box
Onblur = “getPlace(this.value)”
Ajax Toolkits
There are many toolkits to help build Ajax applications, for both server-side and client-side
Client-side toolkits:
1. Dojo
A free JavaScript library of modules, for Ajax and other parts of Web site software which
provides commonly needed code and hides the differences among browsers
An example – ordering a shirt on-line
After the user selects a size, present the user with the colors in that size that are now in stock
Use Ajax to get the colors for the chosen size
The original document is for one particular style of shirt, including a menu for sizes and an
empty menu for colors
1. Dojo (cont)
The required JavaScript must define two functions
A. buildMenu – the callback function to build the menu of colors
- Get the DOM address of the empty select
- If it is not the first request, set options property to zero
- Split the returned value (a string of colors separated by commas and spaces)
- Build the Options of the menu and add them to the menu with add
- The second parameter to add is browser dependent; for IE, it is -1; for others, it is null
B. getColors – a wrapper function that calls bind to create the Ajax request
2. Prototype
A toolkit that extends JavaScript and provides tools for Ajax applications
Includes a large number of functions and abbreviations of commonly needed JavaScript
code
$("name") is an abbreviation for
document.getElementById("name")
document.getElementById("name"). Value = “Freddie”;
$ ("name"). Value = “Freddie”;
In Prototype, all of the Ajax functionality is encapsulated in the Ajax object. A request is
created by creating an object of Ajax.Request type, sending the parameters to the
constructor
• The first parameter is the URL of the server
• The second parameter is a literal object with the other required information:
- method – "get" or "post"
- parameters – what to attach to the get
- onSuccess – the anonymous callback
function to handle the return
- onFailure – the anonymous callback
function for failure
Code example
new Ajax.request(“getCityState.php”, {
Method: “get”,
Parameters: “zip=“ + zip’
onSuccess: function (request) {
var place = request.responseText.split (‘ , ‘);
$ (“city”).value = place[0];
$ (“state”).value = place[1];
}
onFailure: function (request) {
alert (“Error – request failed”) ;
}
} );
Security and Ajax
Issues:
1. In many cases, Ajax developers put security code in the client code, but it also
must be included in the server code, because intruders can change the code on
the client
2. Non-Ajax applications often have just one or only a few server-side sources of
responses, but Ajax applications often have many server-side programs that
produce small amounts of data. This increases the attack surface of the whole
application.
3. Cross-site scripting – servers providing JavaScript code as an Ajax response.
Such code could be modified by an intruder before it is run on the client
All such code must be scanned before it is interpreted
Intruder code could also come to the client from text boxes used to collect return
data
It could include script tags with malicious code
COM531 Multimedia
Technologies
Lecture 8 – Ruby and Rails
Origins and Uses of Ruby
Designed by Yukihiro Matsumoto (Matz); released in 1996
Use spread rapidly in Japan, Use is now growing in part because of Rails
(will be covered later in lecture)
A pure object-oriented purely interpreted scripting language
Related to Perl and JavaScript, but not closely
Scalar Types and Their Operations
There are three categories of data types: scalars, arrays, and hashes
Two categories of scalars, numerics and strings
All numeric types are descendants of the Numeric class
Integers: Fixnum (usually 32 bits) and Bignum
Overview of Rails
Rails is a development framework for Web-based applications
Rails is written in Ruby and uses Ruby for its applications - Ruby
on Rails (RoR)
Based on Model-Viewer-Controller (MVC) architecture for
applications, which cleanly separates applications into three parts:
- Model – the data and any restraints on it
- View – prepares and presents results to the user
- Controller – controls the application
One characterizing part of Rails is its approach to connecting
object-oriented software with a relational database, using an
object-relational mapping (ORM) approach which maps tables to
classes, rows to objects, and columns to fields of the objects
The classes, objects, methods and attributes that represent a
database in Ruby are automatically built in Rails
Rails components
Request
Browser
Controller
Response
View
Model
A request and response in a Rails application
Database
Rails Applications with Databases (cont)
- If we click New corvette, we get:
Note: Rails built the basic table maintenance
operations - create, read, update, and delete (CRUD)
Rails Applications with Databases (cont)
- If we fill out the form, as in:
- Now we click Create, which produces:
Rails Applications with Databases (cont)
- Now if we click Back, we get:
- If we click Edit, we get:
Rails Applications with Databases (cont)
- If we click Destroy, we get:
- The model file, which is in cars/models, has the empty class:
class Corvette < ActiveRecord::Base
end
- We can easily add some validation to this class to produce an error message if
any fields are left blank
validate_presence_of :body_style, :miles, :year
- A filled out request:
- The result document:
Modifying a database (cont)
Now the display of corvettes is:
- To go back to the last migration form:
>rake db:rollback
- To go back to any migration:
>rake db:migrate VERSION=1
NOTE: The scaffold-provided methods for listing database tables, creating
new rows, editing rows, and deleting rows. However, for creating real
database MySQL is a better option
(ask me if you want the code for creating MySQL file)
COM531 Multimedia
Technologies
Lecture 8 – Employability
Job Specifications
Industrial Speaker –
Mr Tony Devlin, Glenovation
COM531 Multimedia
Technologies
Lecture 9 – HCI Guidelines
Evaluation
Design Principles, Guidelines
and Rules
International Standards
Design Principles
Universally
applicable high level
design goals, based
on International
Standards
Open to board
interpretation
‘Design for Human
Cognitive Limitations’
Design Guideline
Principles are
interpreted;
guidelines produced
to assist with design
situations
Must be interpreted
within the context of
the task. Usability
must include taskcontext dependent
feature
‘Recognition rather
than recall’
‘Make it obvious
which menu items
are/are not active at
any time’
Design Rule
Highly specific low
level design rules
Found in corporate
style guides and
design manuals.
In menu design,
‘Max of 10 items per
panel; inactive items
should be greyed out’
HCI Guidelines




“Broad brush” design rules
Useful check list for good design
Better design using these than using nothing!
Different collections:



Benyon and Turner’s 12 Principles
Nielsen’s 10 Heuristics
Shneiderman’s 8 Golden Rules
Benyon and Turner’s 12
Principles
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Visibility
Consistency
Familiarity
Affordance
Navigation
Control
Feedback
Recovery
Constraints
Flexibility
Style
Conviviality
Nielsen’s 10 Heuristics
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Helping users recognise, diagnose and recover from
errors
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help and documentation
Shneiderman’s 8 Golden Rules
1.
2.
3.
4.
5.
6.
7.
8.
Strive for consistency
Enable frequent users to use shortcuts
Offer informative feedback
Design dialogs to yield closure
Offer error prevention and simple error
handling
Permit easy reversal of actions
Support internal locus of control
Reduce short-term memory load
International Standards




ISO 9126 Software Engineering
International standard for the evaluation of the
quality of software
4 Parts
Part 1 Software Quality






Functionality
Reliability
Usability
Efficiency
Maintainability
Portability
International Standards




ISO 14915-1:2002 Software ergonomics for
multimedia user interfaces
 Part 1: Design principles and framework
 Part 2: Multimedia navigation and control
 Part 3: Media selection and combination
ISO 20282-1:2006 Ease of operation of everyday
products
 Part 1: Design requirements for context of use and
user characteristics
ISO 6385:2004 Ergonomic principles in the design of
work systems
ISO 9355-2:1999 Parts 1 and 2 "Ergonomic
requirements for the design of displays and control
actuators"
International Standards

ISO/IEC 25051:2005 Software engineering -- Software
product Quality Requirements and Evaluation (SQuaRE)
 Requirements for quality of Commercial Off-The-Shelf
(COTS) software product and instructions for testing

ISO/IEC 25062:2006 Software engineering -- Software
product Quality Requirements and Evaluation (SQuaRE)
 Common Industry Format (CIF) for usability test
reports

ISO/TR 16982:2002 Ergonomics of human-system
interaction
 Usability methods supporting human-centred design
International Standards
Specific for Icons








ISO 11581- 1 Icon Symbols & Functions - General
ISO 11581- 2 Object Icons
ISO 11581- 3 Pointer Icons
ISO 11581- 4 Control Icons
ISO 11581- 5 Tool Icons
ISO 11581- 6 Action Icons
ISO 18035 Icons for Controlling Multimedia Software
ISO 18036 Icons for World Wide Browser Toolbars
International Standards

ISO 9241 Ergonomic Requirements for Office Work
with Visual Display Terminals (VDT).
 32 Parts covering all aspects of Usability
(hardware, software, processes)
 Part 11 Guidance on Usability



Read ISO 9241 Bluffer Guide
For more information on standards:
http://www.procontext.com/en/guidelines/standards.
html
Evaluation
User-Centred System Design
Problem
Statement
Usability Guidelines
& Heuristics
Task
Analysis
Observation of
existing systems
Requirements
Gathering
Requirements Statement –
Functional and non-functional
Design &
Storyboarding
Storyboard
Prototype
Implementation
Evaluation
Installation
Prototype
Transcript & Evaluation Report
Final Implementation
Evaluation




‘Evaluation is concerned with gathering data about the
usability of a design or product by a specified group of
users for a particular activity within a specified
environment or work context’ (Preece, 1994)
Evaluation is central to designing interactive systems
Everything gets evaluated at every step of the process
For example, requirements are evaluated, storyboards
evaluated and a prototype built. The prototype is then
evaluated and some aspect of a physical design
identified and implemented; this is then evaluated again
and so the iteration continues until a final product is
complete
Why do we Evaluate?
‘Users will evaluate your interface sooner or later.’







To suggest improvements to the design
To confirm that the software meets all of the
functional and usability specifications
To confirm acceptability of the interface and/or
supporting materials
To compare alternative designs
To ensure that it meets the expectations of users
To match or exceed the usability of competitor’s
products
To ensure that it complies with standards and any
statutory requirements
Evaluation is Often Performed Badly





Designers assume their own personal behaviour is
‘representative’ of that of an average user
Designers make assumptions about how people are
able to operate the software, but these assumptions
might well be unfounded.
Acceptance of traditional/standard interface design assume style guides ensure good software design
Evaluation may be postponed until ‘a more convenient
time’ when functionality is complete
Poor knowledge of evaluation techniques and lack of
expertise in analysing experiments
What Do We Evaluate?






Usability (Criteria)
Initial designs (pre-implementation)
Interfaces/Interaction (Heuristics)
Prototype at various stages
Final implementation of software system
Documentation
Types of Evaluation


Formative Evaluation
 Evaluation within the design process
 Produce good usability through the process of
evolution, forming/reforming the product
 Informal, Structured
Summative Evaluation
 Take the finished system & assess it for aspects of
usability
 Carry out experiments, after implementation
 Purpose is Quality Control
 Formal, Costly & Time-consuming
Formative Evaluation



Ask the Experts (No users)
1. Cognitive Walkthrough
2. Heuristic Evaluation
Ask the Users
3. Focus groups
4. Questionnaire
5. Interviews
User interaction
6. Think Aloud
7. Co-operative Think Aloud
Cheap
C
O
S
T
S
Expensive
Types of Data


Quantitative data
 ‘Objective’ measures of certain factors by direct
observation
 E.g. time to complete certain tasks, accuracy of
recall, number of errors made
 User performances or attitudes can be recorded in a
numerical form
Qualitative data
 ‘Subjective’ responses; Opinions rather than
measurements
 Reports and opinions that may be categorized in some
way but not reduced to numerical values
Recording Methods






Paper and pencil – cheap, limited to writing speed
Audio – good for think aloud, difficult to match with
other protocols
Video – accurate and realistic, needs special
equipment
Computer logging – automatic and unobtrusive, large
amounts of data difficult to analyze
User notebooks – coarse and subjective, useful
insights, good for longitudinal studies
Mixed use in practice. Audio/video transcription
difficult and requires skill. Some automatic support
tools available
1. Cognitive Walkthrough





‘Expert’ simulates user actions/thoughts and steps through
the action sequence to complete the task
Has rough plan and explores the system for possible actions
Interprets system responses and assesses if each step is or
is not good for a new user
 Are the actions appropriate and visible? Is the feedback
adequate?
Suits systems primarily learned by exploration e.g. walk-upand-use such as ATM, ticket machines
Overall question:
 How successfully does this design guide the unfamiliar
user through the performance of the task?
2. Heuristic Evaluation






A ‘heuristic’ can be defined as a ‘rule-of-thumb’ or
general rule
The idea is to assess the design against known criteria
A number of reviewers (3-5) go through product,
screen by screen, and note any problems and note
violations of these principles, with a severity rating (04)
All responses are collected and aggregated
About 5 reviewers can find about 75% of the problems
Nielsen’s 10 Heuristics
3. Focus Groups





A group of users and an evaluator
Structured group interview; flexible
Allows interaction between users
Typically for requirements gathering, not
system use…
… but can be used post-task
4. Questionnaire




Questions fixed in advance
Completed independently of the evaluator
The purpose of the questionnaire and
purpose of information must be clear
General, open ended, scalar, multi-choice,
ranked questions
5. Interviews





Asking users about their experience with a
system
General questions first, followed by more
detailed ones
Needs careful planning, structured around
some central questions
Structured, semi-structured, unstructured
Requires consistency and flexibility
6. Think Aloud


User participation
User is asked to talk through what he/she is
doing whilst being observed







describing what is happening,
why an action is taken,
what the user is trying to do,
what the user is thinking,
the goal
Evaluator documents actions and problems
found with the interface
Actions and comments are recorded by the
observer using paper notes, video or audio
recording
6. Think Aloud


To increase the quality of the research, we
must avoid the following effects during an
observational study:
Hawthorne Effect


Observer Bias


User increases performance to please observer
Observer only sees and records what they want to
see
Halo Effect

Observer’s judgement is influenced by another,
separate, positive judgement
7. Co-operative Think Aloud




A variation on think-aloud
User and evaluator co-operate in identifying
problems
Evaluator asks questions during the session
User can ask for clarification
General Points


Evaluation is relevant throughout all stages
of development
Different methods are most suited at different
stages - rule-of-thumb:




Early design - analytical
Prototype development - observational/
experimental
Late development - survey
A mix of objective and subjective measures is
desirable
COM531 Multimedia
Technologies
Lecture 11 – Legal Issues
Legislation

Numerous acts to consider







Data Protection Act
Computer Misuse Act
Copyright
Intellectual Property Rights
DDA and SENDA
Plus knowledge of related areas, e.g. equalities
and anti-discrimination legislation
Further information from JISC Legal
www.jisclegal.ac.uk
Internal Regulation

JANET AUP –
www.ja.net/services/publications/policy/aup.html





Employment contract
Institution terms of use
Data Protection policy
Copyright policy
Disciplinary offences – procedure
University of Ulster Policies
Acceptable Use Code of Practice
 http://www.ulster.ac.uk/isgsc/documents/auco
p.pdf
Policy overview
 http://www.ulster.ac.uk/isgsc/policies.php
Student Behaviour Policy
 http://www.compeng.ulster.ac.uk/studenthand
book/acceptable-behaviour.htm
Copyright





Internet gives unprecedented scope for accessing and
distributing material
Software/media files/teaching materials
Personal liability
 Holds infringing materials in course of business
 Has reason to believe materials infringe
Institution liability
 Unlikely to be liable
 Removal of materials upon discovery
Web sites
 Copying content, layout, design
Intellectual Property Rights




Protects the rights of an author to be recognised for
work created
Copyright granted on completion of work
 Does not require registration
Legally binding worldwide
 Subject to international treaties
Who owns the work?
 The author unless
 Completed in the course of employment unless
 Any contrary agreement exists or author
employment terms not set by employer
www.jisclegal.ac.uk/ipr/IntellectualProperty.htm
Defamation



Institution role as Internet Service Provider
ISPs are publishers
Potential for liability



Web sites and emails
Blogs/Social Networking
Defence against liability


THES 17/1/08
No reason to believe statement is defamatory
Reasonable care taken in relation to
publication, e.g. Notice and Take Down
www.jisclegal.ac.uk/publications/thirdpartycontent.htm
http://www.jisclegal.ac.uk/Portals/12/Documents/PDFs/GS_Content_Regulation.pdf
Data Protection



Obligations to comply
 Data Controller - employee
 Data Processor - employer
Data collection
 Must be collected for specific purpose
 Purpose must be disclosed to individual
 Processing data for other purposes
Web sites
 Cookies
 Personal data
www.jisclegal.ac.uk/dataprotection/
dataprotection.htm
Inappropriate Activity

Certain activities illegal


Contrary to workplace rules



Child pornography
Pornography
Could constitute harassment
Computer misuse



Contrary to copyright laws e.g. KaZaA
Personal business
Security
www.jisclegal.ac.uk/cybercrime/cybercrime.htm
DDA and SENDA

Disability Discrimination Act, 1995




Special Educational Needs and Disability Act
(SENDA), 2002
Institutions should make reasonable
adjustments
Adjustments should be anticipatory
Test cases will set precedents
www.w3.org/WAI/Policy/#UK

Over 200 government policies available on
www.opsi.gov.uk/acts/acts2001/
ukpga_20010010_en_1

TechDis
www.techdis.ac.uk
Good Practice

Internet Browsing


Discussion boards, blogs etc.



Terms of use
Uploading of
teaching materials
to web site


What is acceptable?
Copyright-cleared
Monitoring the system
Security responsibilities passwords
Compliance

Internal Regulations


Codes of conduct




Provide guidance
Implement and monitor
Nardinelli vs. Chevron
Instant Messaging
Common sense

No defence against liability
Summary

Policies required for key areas




Implement
Keep up-to-date
Inform users
Monitor

Note legal/moral obligations
Encourage compliance

Tutorial case examples
