Laboratory 5: Collaborative Text Editing

Transcription

1 COMP3511/9511 Lab, Week 12-13, S Laboratory 5: Collaborative Text Editing Time Allocated: 30 minutes As we discussed in lectures, the opportunities for creating new forms of collaboration using networking technologies is enormous, and we have only just reached the point of doing this in an effective manner. In this laboratory exercise you will use a collaborative text editing system called SubEthaEdit to explore concepts in social computing. If you are familiar with Extreme Programming you will find that this editor has been designed to support this method of working collaboratively. Whilst you are carrying out this exercise, take some notes in your design diary about the usability of this application. Starting Up 1. Run the SubEthaEdit Application (located in the Applications folder). There are two versions of the software on the CHIL computers. Make sure you run the most recent version labelled SubEthaEdit with the GREEN people in the icon. The other is labelled as SubEthaEdit V1 and is an older version and has BLUE people icons. 2. Fill out the start up and licence screens. In particular fill out the terms of use as Non-commercial use. When you run the application for the first time it will take you through a series of start up and licencing screens. Accept the default options for the first few and fill out the terms of use form for non-commercial use. Select the Non-commercial Use radio button, fill in your name and click the Continue button. Copyright 2004 Daniel Woo V1 0 1

2 COMP3511/9511 Lab, Week 12-13, S Complete the remainder of the set up screens One the next screen Click the Done button. 4. Form a group and select one person to be the document owner The application will open presenting you with a blank document. Team up in groups of 3-4 people and make sure you know each other s name so you can work together. One person in the group will be the document owner and will need to share the document with every one and invite them to participate. 5. The document owner should invite people in the group to edit the document Open the Rendezvous Window (Window>Rendezvous) to show the participants available on the network. (Rendezvous is the technology name Apple uses as part of the network sharing infrastructure which is part of the Zero Configuration Networking standard.) The owner of the document should drag the names of the other group members contained in the Rendezvous window into the Read/Write area of the Participants Drawer which has the title Access Control. (Drawers are the user interface elements that slide out from the side of a window like a drawer, this is enabled by the Participants button in the tool bar). Copyright 2004 Daniel Woo V1 0 2

3 COMP3511/9511 Lab, Week 12-13, S When each name is dragged into the Read/Write area of the drawer it will be given the status Awaiting Response. Each invitee will see an invitation screen appear to which they should accept, provided it is of course the correct person in their group. 6. Each person invited should see and accept an invitation from the group s document owner Once accepted you should be able to all see each other s colour coded typing. Once you have established a group editing session carry out the following exercise. Copyright 2004 Daniel Woo V1 0 3

4 COMP3511/9511 Lab, Week 12-13, S Exercise 1. As a group, write a scenario about a blind person using the Internet or a desktop computer to do use an application (Mail, Calendar). Save the document and the results to your tutor. 2. Create a new document and try writing some software code (C, Java etc.) for sorting numbers with the Mode>Switch Mode menu option set the desired language. Discussion Discuss how well this application supports the ideas behind collaborative computing. What usability issues did your group identify? Copyright 2004 Daniel Woo V1 0 4

5 Laboratory 5 - User Interface Layout with Interface Builder Time Allocated: 40 minutes Aim In this laboratory you will use Interface Builder, a user interface layout tool to design an interface. The laboratory presents a familarisation exercise to help introduce you to Interface Builder. If time permits you may like to create a form design with interface builder. We suggest using something like the CSE Course Substitution form. Background Reading Lecture on User Interface Design Tools (Week 11) Aqua User Interface Guidelines (Chapters 2 & 8 see html Link is available via the laboratory section on the class web site) Objectives At the end of this laboratory, you should be able to: Understand the function of a graphical user interface design tool Construct a basic window layout See how Interface Builder supports the User Interface Guidelines Inspect and change the attributes of the user interface elements Understand how this electronic tool could be used to produce paper printout s of of electronic layouts Opening Interface Builder in Mac OS X In the Mac OS X environment, open the Interface Builder Application. It may be available directly from the dock. Alternatively, if the application icon is not in the dock, the application is found using the Finder by navigating down the hierarchy: 1) Macintosh HD, 2) Developer, Applications, 3) Interface Builder. When Interface Builder first opens you will see two windows including: Starting Point - allows you to create various window layouts Cocoa Palettes Window - maintains the collection of interactive elements that can be placed into an application window. Consists of menus, controls and indicators, text controls, windows, data views, container views and graphics (plus others). Copyright CSE, UNSW V1.3 1

6 Creating a New Window In this section you will create an example simple Cocoa 1 window that could be used to capture personal details. The following is a sketch of what the window should look like and what it should include. This includes text system font text for labels, text fields for text entry, radio buttons for the states and buttons for clear and save. Name Street Suburb Postcode State ACT NSW NT QLD SA TAS VIC WA Clear Save 1. Create a new Cocoa Application window by selecting the Application under the Cocoa category in the Starting Point window. 1 Cocoa is an extensible library of reusable software components used for building applications that run on Mac OS X. Originally developed by NeXT in (Learning Cocoa, Apple Inc., 2001) Copyright CSE, UNSW V1.3 2

7 2. Notice that once you have highlighted the Application entry, the New button becomes active. 3. Click the New button. An empty window appears, ready for you to place user interface elements. Adding the label and edit text fields 1. Click and hold down on the System Font Text item in the palette. 2. With your mouse held down, drag the System Font Text from the Cocoa Text Palette into the empty window. 3. As you drag the icon move it near the edges of the window to view the guideline markers that appear. 4. Place the text so that it is a recommended distance away from the top title area and left edge of the window. 5. You will now drag a text edit field alongside the text area. To do this, select the text field from the palette and drag it into the window. Place the text field the Copyright CSE, UNSW V1.3 3

8 recommended distance away from both the title bar and to the right of the message text. 6. The distance that a user interface object is from other objects can be measured more accurately. First, select the element you are attempting to measure by clicking the mouse button. This highlights the element. Then, hold down the option key and move the mouse (without clicking) over other objects to reveal more detailed relative measurements. 7. Experiment with the location of the message text and edit text elements. To understand how the User Interface Guidelines work. Expand the edit text elements to a reasonable width. Align the labels and the edit text areas. Saving You should periodically save your work. Select File->Save from the menu or Apple key + S (not Control) Files will automatically be appended with a.nib file suffix. Resizing the Window You may need to resize the overall window area. The resize box is located in the lower right corner of the window. Copyright CSE, UNSW V1.3 4

9 Editing Attributes Change the System Text to a meaningful label: Name. You can double click the placed label or use the Info window to edit the label name. We ll describe the way that uses the Info window. 1. Make sure the Info window (Tools>Show Info) has the top pop-up menu set to Attributes. 2. Select the System Font Text in the Window. This Information Window can be displayed by going to the Tools menu bar, then selecting Show Info. The popup menu has an item called Attributes. 3. Note that the Title field in the Information window has the contents of the System Font Text. Change the Title text in the Information Window to Name. When you finish typing in the word Name, hit the return or tab key. The text will update. 4. Continue to create labels and fields for Street, Suburb and Postcode. If you wish to resize the bounding boxes around the label your have three options. Manually resize the rectangles by dragging the drag markers (small circles), or select the label and chose choose Layout>Size to fit or press the apple key and the equals key to resize it to fit the current text. Creating the Radio Buttons 1. Add a grouping box in which the radio buttons for the Australian states will be placed. 2. Using the Info window attributes, update the group box so that the title is State. Copyright CSE, UNSW V1.3 5

10 3. Resize the box by selecting and dragging one of the round drag markers that appears around the box when it is highlighted. 4. Drag the radio button element within the bounds of the State box. 5. Instead of placing several sets of radio buttons, an array of radio buttons can be created by dragging the drag markers with the option key held down. First, hold down the option key and select the right drag marker. Then, keeping the mouse button and the option key held down, move the mouse to the right. You should see more radio buttons appear. Create 8 radio buttons in a 2 row by 4-column arrangement. 6. Each radio button can be edited separately by double clicking on the individual radio button. When it is selected, the Information window will display the attributes specifically for a single radio button. 7. Update the titles for each of the radio button labels with the Australian states and territory codes: ACT, NSW, NT, QLD, SA, TAS, VIC, WA. Copyright CSE, UNSW V1.3 6

11 Adding Buttons The Button element can be dragged into the window. 1. Place two buttons in the lower right corner of the window. Ensure that they are the correct distance from the bottom of the State box. 2. Update the attributes of the buttons with the title names Clear and Save. 3. For the Save button change the Keyboard equivalent code attribute from <no key> to Return. This makes the Save button the default button. Changing the Window Title The Window title defaults to the word Window. 1. Select the window by clicking on an empty part of the underlying window. 2. Change the Information attributes so that the Title is set to Personal Details. Testing the Interface The development environment allows you to test the interface to ensure that the buttons are behaving as expected. 1. Select the Test Interface option in the file menu. 2. Experiment with the fields to see if they work the way you expect. You can also highlight, cut and paste text between edit fields. 3. A separate application is created that represents your interface. Copyright CSE, UNSW V1.3 7

12 Since this is a separate application you need to Quit New Application from the Interface Builder Menu when you are done. Note that even though the Interface Builder text appears in the menu, you are in fact running a separate application. You can tell since New Application is found in the first About, Hide and Quit menus. When you Quit you are quitting the testing of the interface, not the Interface Builder application. Note that the icon for Interface Builder changes when testing the interface. 4. When you are finished testing the interface, quit. You will be taken back to edit mode within Interface Builder. Adding Tool Tips Many applications use "Tool tips" to provide simple context sensitive help. When you bring your mouse close to a user interface element and pause for a few seconds, a help message will appear. Interface Builder allows you to create tool tips but updating the attributes for the particular user interface element. In this part we will create a tool tip for the State box. 1. Select the State box. 2. View the Information Window. 3. Change the pop-up menu to help. 4. Fill in the help text with "Select an Australian state" 5. Test you interface to verify that Tool tips work as expected. Additional Exercise If time permits, create an electronic mock up of a screen of your choice with interface builder. You can create an additional window in the current nib file (typically you create separate nib files for each window). You may need to create several windows. To create additional windows: Copyright CSE, UNSW V1.3 8

13 1. Select the Windows button in the Palette. 2. Drag the Window icon into the "Instances Pane" of Interface Builder. New windows are automatically labelled with window followed by a number. 3. In the Instances Pane, double click on the new window icon (Window1) to display the new empty window. 4. When you have finished, run a quick electronic prototype walkthrough session with another student. Copyright CSE, UNSW V1.3 9

14 COMP3511/9511 UNSW Laboratory 5 Wk 12-13, Session 2, 2004 Laboratory 5 Universal Access Aim In this laboratory you will consider the needs of disabled users when using computer systems. Two different applications will be evaluated for their suitability for different forms of disability. You will also evaluate and discuss the Universal Access features provided in Mac OS X Objectives Investigate the suitability of an alternative character input application for use by people with limited movement. Understand the needs of visually impaired computer users and how they might work with keyboard-based computers. Evaluate and discuss the Universal Access System Preferences available in Mac OS X. Preparation Consider a person with a physical impairment that prevents them from using a mouse device. They may only be able to use a joystick in the up and down directions. How would they enter text into a computer? Consider a blind or visually impaired computer user. What sort of support do you think they would need when using a computer with a graphical user interface? You may like to visit the Dasher web site Review the accessibility features are provided by the operating system you typically use. Observing Impaired Users In this laboratory you will work in pairs to investigate the applications Dasher 1 and Type Speaker 2 for use in situations requiring accessibility support. Dasher will be used to understand how users with limited movement could enter text and Type Speaker will be used to understand how visually impaired users might interact with a computer keyboard input device. Type Speaker uses the text to speech engine on Mac OS X so you will need to check that the audio volume is turned on. An audio icon is available in the right hand side of the menu bar that will allow adjustment of the volume Daniel Woo, 2003 Copyright 2003 DW CSE UNSW V1.1 1

15 COMP3511/9511 UNSW Laboratory 5 Wk 12-13, Session 2, 2004 The application icons for Dasher and Type Speaker are located in the Applications folder. In a Finder window you can press the Applications button or using the menus in Finder, you can select Go->Applications. Each person will play the role of a disabled user and attempt to use one of the software applications. The other person will observe and take notes. Swap roles after about 10 minutes. Note that Type Speaker is a very simple prototype developed for this laboratory and is not supposed to be a feature complete application. Group Discussion Discuss the suitability of the applications for use in situations of impaired or restricted hand movement and visual impairment. What features are needed to enhance the applications? What features could be changed to make the application work for the situation? Reviewing Universal Access Features in Mac OS X Individually, conduct a review of the Universal Access System Preferences. Write your notes in your design diary. To access these features: 1. Open the System Preferences menu item from the Apple menu. Copyright 2003 DW CSE UNSW V1.1 2

16 COMP3511/9511 UNSW Laboratory 5 Wk 12-13, Session 2, Select the Universal Access icon. 3. Review the different options provided. Group Discussion For what audience are the Universal Access features in Mac OS X targeted towards? What features are provided and how are they supposed to be used? What limitations can be identified with the current features? How do the features compare with those provided by other operating systems? What additional features/support do you think should be added? What usability issues can you identify with the Universal Access preferences panel? Copyright 2003 DW CSE UNSW V1.1 3