Rapid Storyboarding with Microsoft InfoPath

401 Rapid Storyboarding with Microsoft InfoPath Maria Leggett, Textron, Inc June 15-16, 2006 Produced by Advanced Topics in e-Learning Instructiona...
Author: Amy McBride
0 downloads 0 Views 1018KB Size
401

Rapid Storyboarding with Microsoft InfoPath Maria Leggett, Textron, Inc

June 15-16, 2006 Produced by

Advanced Topics in e-Learning Instructional Design

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Rapid Storyboarding with Microsoft InfoPath Maria Leggett

Some Problems ƒ Good design = LOTS of time ƒ Need rapid design to implement rapid development ƒ Need an effective way to collect information from multiple sources •Subject Matter Expert (SME) •Instructional Designer •Developer/Programmer

ƒ Multiple documents and versions of material 2

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 1

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Microsoft InfoPath

ƒ Part of the Microsoft Office 2003 Suite (Professional Version) ƒ Looks similar to Microsoft Word ƒ Collects and distributes form information with no programming ƒ Information collected is reusable because content is collected in XML format 3

Microsoft InfoPath ƒ XML Editor ƒ Uses XSLT to display data ƒ XML – eXtensible Markup Language ƒ XSLT – eXtensible Style Language Transformation

4

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 2

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

ƒ XML is a markup language that is used to give structure to data. ƒ An XML document contains:

•Data •XML markup that provides structure for data •Markup consists of tags enclosed in angle brackets < > •Data

ƒ XML consists of:

•Elements •Attributes 5

ƒXML is platform independent ƒXML is flexible and reusable ƒXSLT displays the XML in a variety of formats •XHTML •XML •Text document (.txt)

6

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 3

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

XML Schema

Defines an element called sectionName that can only contain string data (text)

ƒ InfoPath generates a schema or uses an existing one to control data structure. ƒ A Schema contains descriptions of the type of content and structure that the XML document can have and any constraints on the data type and display. 7

Getting to Know InfoPath ƒ Use layout tables to organize and design forms ƒ Format text and add color ƒ Insert hyperlinks, images, add borders and shading to layout tables

8

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 4

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Getting to Know InfoPath ƒ Add functionality with controls •Radio buttons •Checkboxes •Calendar •Drop-down lists

9

Getting to Know InfoPath ƒ Create optional sections that are viewable when needed ƒ Keeps the form clear and easier to read

10

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 5

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Getting to Know InfoPath ƒ Repeating tables and sections allow users to expand sections when completing a form. ƒ Users can add more information when needed

11

Getting to Know InfoPath

ƒ Can create multiple views of the data ƒ Different views for different tasks or people 12

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 6

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Getting to Know InfoPath 1. Determine content to display 2. Create the data source fields • Use descriptive names • No spaces in names

13

Example Documents ƒ Requirements document ƒ Design document ƒ Instructional analysis ƒ Storyboard ƒ Functional specifications ƒ Flowcharts

14

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 7

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Example Content ƒ Description

•Brief summary of overall project, content, technology

ƒ Goals

•What are business or performance outcomes that will result from students completing the program?

ƒ Audience

•Describe student audience including, if applicable, their prior knowledge, demographics, psychographics, and attitudes towards content and technology.

ƒ Content

•Describe the source materials and access to any subject-matter experts. 15

Example Content ƒ Objectives •Lesson/content objectives

ƒ Metaphor or theme •Describe the overall interface metaphor or creative theme which will be used throughout the program.

ƒ User interface •Provide narrative description, from the user's point of view, of how the program will be navigated.

16

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 8

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Design Tips ƒ Use layout tables to organize the data fields

•First, create the layout table •Table > Insert >Layout Table OR •Click Layout from the Design Tasks panel

ƒ Break your form into sections with a separate layout table for each main section ƒ Use the color schemes (Format > Color Schemes) to set up different colors for layout tables and views 17

InfoPath Gotchas !!!??? ƒ Users must have InfoPath (preferably SP1) installed on their computers to access the document. ƒ Must publish the InfoPath document to a shared directory or Web site where all everyone using the form has access. ƒ When exporting a storyboard to Word, pictures will not export over. • Copy the picture from InfoPath to Word by selecting it in the document and choosing Edit > Copy and pasting it in the correct place in Word. 18

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 9

Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Resources ƒWebsites •http://office.microsoft.com/en-us/FX010857921033.aspx •Tutorials and templates

ƒBooks •Powering Office 2003 with XML •Programming Microsoft InfoPath: A Developer’s Guide •Microsoft Office InfoPath 2003 Kick Start •Beginning InfoPath 2003

ƒXML/XSL/XSLT Tutorials •http://www.w3schools.com 19

Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.

Page 10

Getting Started with Microsoft InfoPath InfoPath Interface

Form Area

Creating a New Form 1. Choose File > Design a Form. 2. Select an option from the Design a new form menu on the right.

ƒ ƒ ƒ

To create a form from scratch, choose New Blank Form To customize a pre-built Microsoft template, choose Customize a Sample… If using a previously created XML document or schema, choose New from XML Document or Schema

Task Pane

Getting Started with Microsoft InfoPath

Adding Data Source Fields The data source stores all the data in the form. The data source is made up of field groups and fields. The overall data source is similar to folders and files on a hard drive. Field: An element or attribute in a data source that contains the data. If the field is an element, it can contain attribute fields. Fields store the data that is entered into controls. Group: An element in a data source that can contain fields and other groups. Can also contain field controls. Repeating Group: An element in a data source that contains fields and other groups that can be repeatedly used in the InfoPath document.

Field

Group Repeating Group

1. Click the Data Source link from the Design Tasks panel on the right.

2. InfoPath will always name the first group myfields. You can rename this group by double-clicking myfields in the Data sources list and typing in a new name.

2

Getting Started with Microsoft InfoPath

3. To add more data sources, click the Add button below or right-click the group folder and choose Add from the menu.

4. Type in a name for the data source and select whether the data source will be a field or group.

5. Choose the data type from the drop-down list.

6. Click OK.

3

Getting Started with Microsoft InfoPath

Returning to the Design Task View

To return to the main design task view, click the Design Tasks button on toolbar at the top.

Laying Out a Form 1. Choose Table > Insert > Layout Table. -OR2. Choose Layout from the Design Tasks panel on the right and select a layout table.

Adding Fields to a Form 1. Drag the fields from the data source onto the form area.

Adding a Field Control From the Data Sources Menu 1. Click in the form area where you want to place the control. 2. Right-click the field in the data sources menu and select the control from the shortcut menu. Converting an Existing Field on the Form Area to a Control 1. Right-click the field on the form area and choose Change To… 2. Select the appropriate control from the shortcut menu.

NOTE: Only fields can be bound to a control not groups (folder icons)

4

Getting Started with Microsoft InfoPath

Create a New View A view is a defined form-specific display setting that is saved with the form template and applied to the form data when the form is filled out. You can create custom views to present specific information to certain audiences. 1. From the Design Tasks menu, select the Views link. 2. From the Actions menu at the bottom, select Add a New View.

3. Type in a name for the view in the Add View box. 4. Add layout tables and drag the appropriate data fields onto the form area. Shortcut: Once you have created the new view, copy the fields and layouts from another view and paste into a new view and modify the fields.

Preview a Form 1. To preview a form and test as a user entering data, choose the Preview Form button from the menu at the top.

2. To close the preview window, click the Close Preview button on the menu at the top.

5

Getting Started with Microsoft InfoPath

Setting Print Properties for a Form 1. Choose File > Page Setup. 2. Click the Print Settings tab.

Publishing a Form 1. Choose File > Publish. 2. Click Next on the Publishing Wizard. 3. Choose a location to publish the file. If you do not have a Web server or a SharePoint server, choose To a shared folder on a this computer or on a network. NOTE: InfoPath documents must be published to a shared location where all users have access. This can be a shared directory folder on a network or a place on a Web server.

4. Click Next.

6

Getting Started with Microsoft InfoPath

5. Browse for the InfoPath document (.xsn document) on your computer and select it. 6. Type in a new form name if you wish to have a different name from what you named the InfoPath document.

7. Click Next. 8. Click Finish.

9. If you wish to send your users an email with the link to the form, click Notify Users. This button will open Outlook and generate an email with the link to the InfoPath document. 10. Click Close.

Opening an InfoPath Document to Edit

To open a previously-designed InfoPath document, you cannot double-click the document to open. This will generate a template of the InfoPath form.

7

Getting Started with Microsoft InfoPath

1. Choose File > Open and browse for the InfoPath document (has an .xsn extension) -

OR –

2. Right-click the InfoPath document in folder view and choose Design from the shortcut menu.

Locking Fields on an InfoPath form to Prevent Editing 1. Right-click the field on the form area that you wish to lock. 2. Choose [field] Properties from the shortcut menu.

3. In the properties panel, choose the Display tab.

4. Check the Read-only box to lock the field. 5. Click OK.

Modifying Fields 1. To modifying any fields on the form area, right-click the field and choose the [field] Properties from the shortcut menu.

8

Getting Started with Microsoft InfoPath

Creating a Document from a Published InfoPath Form Once the InfoPath document has been published, it now becomes a template. The files generated from the template are XML files (.xml). 1. 2. 3. 4. 5.

Double-click the InfoPath document to generate a template file. Enter the information required. Choose File > Save or Save as to save the file. Give the file a name. The file will be a XML document such as Form1.xml.

Exporting an InfoPath Document When users do not have the InfoPath software installed on their computer, the form can be exported out to Word. The first step requires extracting the XSL documents which represent the different views that you created in InfoPath. By naming the views in InfoPath descriptive names, you will easily locate the correct XSL view document that you need. Step 1: Extract XSL documents from the InfoPath Document. 1. Choose File > Extract Form Files. 2. Choose a location on your computer to place the files.

Step 2: Open the document in Microsoft Word and apply the XSL document to view data. 1. In Word, choose File > Open and find your completed form from the InfoPath document. A completed form is now an XML document such as form1.xml. 2. When the file is opened in Word, it displays the XML tags.

9

Getting Started with Microsoft InfoPath

3. On the right side there is a menu panel called XML Data Views. 4. Click the Browse button and find the XSL view document that you wish to display

5. Word will apply the XSL Transformation to the XML file. 6. Save the file as a Word document by choose File > Save As. 7. Choose Word Document (.doc) from the drop-down menu in the Save as type box. 8. Click Save.

10

Getting Started with Microsoft InfoPath

NOTE: Field controls such as date and drop down lists will not always come over correctly. It is advisable to create a scaled down view with only text fields when creating a view that will be exported out and then opened in Word. In addition, images from InfoPath will not come over to Word. See directions below.

Add Images to Exported Word Document 1. Click the image in the InfoPath document and choose Edit > Copy or rightclick and choose Copy. 2. Click in the place in the Word document where you want to add the picture and click Paste.

11

Design Document Project Title

The Cell Cycle

Content Type Project Lead

Maria Leggett

Due Date

2006-06-16Error! Cannot read or display file.

Learning Objectives

At the end of this module, you will be able to: ƒ List and describe the different phases of the cell cycle successfully in 5 minutes ƒ Match the picture to the correct stage in the cell cycle in 3 minutes when given pictures of the different cell s ƒ Explain the difference between plant and animal mitosis when shown animations of the movement of chromo mitosis

Scene Scene Number Scene Name

1 Introduction

Scene Directions Show large picture of the cell in order to see all the parts

Section Number Screen Visuals/Action Show the full cell cycle to demonstrate what happens during cell division.

1 Script

The cell cycle is the series of events that cells go through as they grow and div

prepares for division, and divides to form two daughter cells, each of which the

Screen Text Section Number Screen Visuals/Action Show interphase steps in the cell.

2 Script

The life cycle of the cell consists of two phases. The first is the Mitotic Phase (m nuclear and cytoplasmic contents to form two cells.

Screen Text Mitotic Phase Section Number Screen Visuals/Action

3 Script

Provide a visual that demonstrates the

The second phase is Interphase, which is the time between cell

waiting/time.

chromosomes are not visible and DNA is in the form of chroma

Screen Text Interphase

[END OF SCENE] Scene Scene Number Scene Name Scene Directions

2 Interphase

Section Number 1 Screen Visuals/Action Script

Interphase is divided into three phases: G1 Phase, S Phase, and G2 Phase. Cells spend m Screen Text

[END OF SCENE]

Storyboard Project Title

The Cell Cycle

Content Type Development Lead

Maria Leggett

Due Date

2006-06-16

Scene Scene Number Scene Name

1 Introduction

Scene Show large picture of the cell in order to see all the parts Directions Section Number 1 Screenshot 1 Screenshot 2 Voiceover Text The cell cycle is the series of events that cells go through as they grow and divide. During the cell cycle, a cell grows, prepares for division, and divides to form two daughter cells, each of which then begins the cycle again. Screen Visuals/Directions from Design Document Show the full cell cycle to demonstrate what happens during cell division. Screen Actions

1. Cell appears to the right of the graphic. 2. The cell will become larger to show growth 3. Chromosomes split 4. Cell splits into 2 cells. Screen Text Audio File Name Programming

Create a separate movie clip for the cell lifecycle animation. Display REPLAY button at the end

of the animation to allow for replay. Section Number

2 Screenshot 1

Voiceover Text The life cycle of the cell consists of two phases. The first is the Mitotic Phase (m phase), in which a cell divides its nuclear and cytoplasmic contents to form two cells. Screen Visuals/Directions from Design Document Show interphase steps in the cell. Screen Actions

1. Lines appear to the Mitosis section and the word Mitosis appears. 2. The rest of the cell is highlighted red and only the Mitosis section is entirely visible 3. The cell animation splits Screen Text Mitotic Phase Audio File Name Programming Section Number

3 Screenshot 1

Voiceover Text The second phase is Interphase, which is the time between cell divisions. During Interphase, chromosomes are not visible and DNA is in the form of chromatin. Screen Visuals/Directions from Design Document Provide a visual that demonstrates the waiting/time. Screen Actions

1. Lines appear and the word Interphase 2. Clock appears to show time 3. Clock hands move to show waiting time of Interphase Screen Text Interphase Audio File Name Programming

[END OF SCENE] Scene Scene Number Scene Name Scene Directions Section Number

2 Interphase 1

Screenshot 1 Voiceover Text Interphase is divided into three phases: G1 Phase, S Phase, and G2 Phase. Cells spend most of their time in interphase. Screen Visuals/Directions from Design Document Screen Actions

1. Red lines appear to highlight each of the different phases of cell division. 2. Red arrows appear in time with voiceover for each of the different phases. Screen Text Audio File Name

Programming

[END OF SCENE]

SME Review Project Title

The Cell Cycle

Scene Scene

Introduction

Scene Number Section Number

1

Screenshot 1

Screenshot 2

Voiceover Script The cell cycle is the series of events that cells go through as they grow and divide. During the cell cycle, a cell gro divides to form two daughter cells, each of which then begins the cycle again. Actions

1. Cell appears to the right of the graphic. 2. The cell will become larger to show growth 3. Chromosomes split 4. Cell splits into 2 cells. Screen Text Review Feedback Audio File Section Number

Screenshot 1

Voiceover Script The life cycle of the cell consists of two phases. The first is the Mitotic Phase (m phase), in which a cell divides its contents to form two cells. Actions

1. Lines appear to the Mitosis section and the word Mitosis appears. 2. The rest of the cell is highlighted red and only the Mitosis section is entirely visible 3. The cell animation splits Screen Text Mitotic Phase Review Feedback Audio File Section Number

Screenshot 1

Voiceover Script The second phase is Interphase, which is the time between cell divisions. During Interphase, chromosomes are no form of chromatin. Actions

1. Lines appear and the word Interphase 2. Clock appears to show time 3. Clock hands move to show waiting time of Interphase Screen Text Interphase Review Feedback Audio File

[END OF SCENE] Scene Scene Scene Number Section Number

Interphase 2

Screenshot 1

Voiceover Script Interphase is divided into three phases: G1 Phase, S Phase, and G2 Phase. Cells spend most of their time in interp Actions

1. Red lines appear to highlight each of the different phases of cell division. 2. Red arrows appear in time with voiceover for each of the different phases. Screen Text Review Feedback Audio File

[END OF SCENE]

Suggest Documents