Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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