GENERALIZATION OF TOOLTIPS

Slides:



Advertisements
Similar presentations
Microsoft TM SharePoint Content Management SystemTutorial By Mazen Abdallah Student Assistant at CNS 2010.
Advertisements

Copyright  Oracle Corporation, All rights reserved. 1 Creating an Application: The AppBuilder for Java IDE.
Dawn Pedersen Art Institute. What is Spry? Spry is Dreamweaver’s version of JavaScript libraries. Spry effects alter the look of a page element—or of.
Guide to Oracle10G1 Introduction To Forms Builder Chapter 5.
A Guide to Oracle9i1 Introduction To Forms Builder Chapter 5.
Different Streaming Technologies. Three major streaming technologies include:
Macros Tutorial Week 20. Objectives By the end of this tutorial you should understand how to: Create macros Assign macros to events Associate macros with.
McGraw-Hill/Irwin The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. Microsoft PowerPoint 2002 Working with External.
Created by: Ian Osborn. Possibilities Of Movie Maker Windows Movie Maker allows users to organize and add effects to media clips that ordinarily would.
2. Introduction to the Visual Studio.NET IDE 2. Introduction to the Visual Studio.NET IDE Ch2 – Deitel’s Book.
XML User Interface Language (XUL) Karl Strength April 16, 2006.
Guide to MCSE , Second Edition, Enhanced 1 Objectives Understand and use the Control Panel applets Describe the versatility of the Microsoft Management.
© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.
Dreamweaver MX. 2 Creating External Style Sheets-1 (p. 400) n A style is a group of formatting attributes identified by a single name. n An ________ style.
Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Programming with Microsoft Visual Basic 2012 Chapter 12: Web Applications.
14 Chapter 11: Designing the User Interface. 14 Systems Analysis and Design in a Changing World, 3rd Edition 2 Identifying and Classifying Inputs and.
CapturaTalk4Android Demonstration Abi James
Tutorial 121 Creating a New Web Forms Page You will find that creating Web Forms is similar to creating traditional Windows applications in Visual Basic.
PRESENTED BY: Nadia Qamoum Suzanne Blasingame Rachael Reano Hunza Iqbal.
JAOIT 8.  Dreamweaver is a program for creating web pages and managing websites without having to type HTML code.  WYSIWYG – What you see is what you.
1 Application Software What is application software?  Programs that perform specific tasks for users.
Copyright © 2007 Knowbility, Inc. Accessibility Testing 1 ► Code Validators – XHTML & CSS ► Accessibility Validators – Page by Page ► Listening to Your.
Tutorial 7 Working with Multimedia
Tutorial 7 Designing a Multimedia Web Site
Standard Grade Presentations & Multimedia. Presentation & Multimedia Software Allows the user to set up exciting and attractive documents which helps.
PowerPoint:mac 2004 A Way to Present Information Visually Ann Delesha and Lisa Simonet.
About These Slides This slide set is designed to be used with the OMA sample application It is recommended you follow the steps outlined in the “Preparing.
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
1 EndNote X2 Your Bibliographic Management Tool 30 September 2009 Aaron Tay Tel: /30
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
Assistive Technology November 14, Screen Reader Who uses screen readers? –People with little to no vision What is it? –A form of “Assistive Technology”
1 EndNote X2 Your Bibliographic Management Tool 29 September 2009 Humanities and Social Sciences Resource Teams.
Video notification for SignSupport Remind Deaf users when and how to take medication Student : Vuyisa Phindiso Supervisor : Prof. Bill Tucker.
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.
Written module activity, Page 16 1.We refer to the physical parts of a computer that we can touch and see as hardware. Examples include the mouse, the.
Easy WP Guide V2.6 for WordPress 3.8. easywpguide.com Adding Tags within your Post Adding Tags whilst editing your Post, will automatically assign those.
Inserting an Image Using the WordPress media manager, it’s extremely simple to insert, align and link your individual images and image galleries. To insert.
Creating Games with PowerPoint: The SECRET: Sequence – the order of the slides Connection – how the slides link together.
Learning Aim C.  Once the website is complete, you should test it using the test plan you created at the design stage.
Chapter 8 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.
Bibliography and reference manager programs (EndNote, Mendeley, Zotero) 2015 Attila Skulteti
XP New Perspectives on Creating Web Pages With Word Tutorial 1 1 Creating Web Pages With Word Tutorial 1.
Bibliography and reference manager programs (EndNote, Mendeley, Zotero) 2015 Attila Skulteti
Reference Management Software Tools Zotero – Download Instructions
MicrosoftTM SharePoint Content Management SystemTutorial
Generalization of Tooltips
Software Operating System Applications BIOS.
JavaScript, Sixth Edition
Creating Accessible PDF’s for the Web
Refworks Part I.
Generalisation of tooltips
COP3530- Data Structures JSFiddle
Creating Web Pages and Graphics
Mozilla Firefox connector
How to Convert VOB to MP4 with VOB to MP4 Converter
Microsoft Access 2003 Illustrated Complete
Playing Video (Part 2).
Working Knowledge Training
Predefined Dialog Boxes
Microsoft Video Editing Software
Create and edit web pages 2
Lesson 7 Plan a Presentation
Using Cascading Style Sheets (CSS)
3.00 Understanding the Adobe Dreamweaver interface. (12%)
Generalization of tooltips Supervisor : Prof Tucker
A drag and drop exercise can be created using Word quite easily using tables, text boxes and ensuring the document is saved properly.
EndNote Part 2: Inserting in-text citations and creating a reference list Susan Marsh.
Presentation transcript:

GENERALIZATION OF TOOLTIPS Name : Saira Adams Supervisor : Prof Tucker

Project recap: SOLUTION :Generalization of tooltips (Audio & Video)

Implementation Install add-on

Implementation (2) Debug add-ons

Implementation (3) Load Temporary Add-on

Welcome Page: User selects preference Selected preference redirects to either audio or SASL video tooltip window

Audio tooltip

SASL Video tooltip

Difficulties experienced FIREFOX BROWSER ACTIONS LIMITATIONS Unable to edit icons which cannot be removed TOOLTIP DEFINED AS TEXT Converting text to video and audio- editing not allowed Difficulties experienced

Changes from prototype Extension for Firefox. Tooltips positioned within extension rather than on the actual icon. Changes from prototype

DEVELOPMENT OF THE SOLUTION SOLUTION 1 : CONVERT THE TEXT TO AUDIO AND VIDEO FORMATS WHY THIS COULD NOT BE IMPLEMENTED: Tooltiptext : Predefined as a string Browser action properties: Firefox has a list of predefined actions which can be implemented on a button and within the toolbar.

Solution 2 WHY THIS COULD NOT BE IMPLEMENTED: SOLUTION 2 : An on-click tooltip based on a pop-up event defined by Firefox WHY THIS COULD NOT BE IMPLEMENTED: On-click: Users would not be able to use the buttons. No mouse-over: Tooltips are always implemented on hover.

Arriving at final solution Inspired by Instant Translate extension. browserAction.onClicked: Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup. Researching other add-ons

Solution in detail browserAction.onClicked: Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup. HTML Table stored with icons. Wrote a JavaScript for mouse- over & mouse-on CSS : positions the video in the correct place and sizing the video.

Tools used: SOFTWARE: HARDWARE: HTML 5 & CSS: Design of the UI JAVASCIPT: Locating the icons Creating mouse-over and mouse-out Sizing and locating the video and audio in the correct place. iMOVIE : Editing of video clips & adding subtitles. SOUNDOFTEXT.COM : Creating the audio clips HARDWARE: VIDEO RECORDER : Recording all video clips

Project plan : term 4 Usability Testing : Sample of 4 Deaf computer literate users Usability testing : determine whether tooltip should loop or not. Implement changes from usability testing feedback. Create the user manual: SASL, text, audio. Insert audio and SASL user manuals into extension. Final usability testing Complete documentation and final presentation

References (1) P. Christensson. 2011. Techterms. [ONLINE] Available at:http://techterms.com/definition/tooltip http://techterms.com/definition/tooltip. (2).N. Emberton. 1998. Computer Hope. [ONLINE] Available at: http://www.computerhope.com/more.htm. (3)B.L.U Group. 2014. The linux information project. [ONLINE] Available at: http://www.linfo.org/. (4) M. Oppenheim. Speech and touch enhanced interface for visually impaired users. Journal of Assistive Technologies, 7(3):146–156, 2013 (4)H. Petrie, W. Fisher, K. Weimann, and G. Weber. Augmenting icons for deaf computer users. In Extended abstracts of the 2004 Conference on Human Factors in Computing Systems, page 1131, Vienna Austria, 2004.