Rapid Storyboarding with Microsoft InfoPath

Rapid Storyboarding with Microsoft InfoPath

Maria Leggett, Textron, Inc

Produced by

June 15-16, 2006

401

Advanced Topics in e-LearningInstructional Design

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

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

Rapid Storyboarding with Microsoft InfoPath

Maria Leggett

2

Some Problems

Good design = LOTS of timeNeed rapid design to implement rapid developmentNeed an effective way to collect information from multiple sources•Subject Matter Expert (SME)•Instructional Designer •Developer/Programmer

Multiple documents and versions of material



3

Microsoft InfoPath

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

4

Microsoft InfoPath

XML EditorUses XSLT to display data

XML – eXtensible Markup LanguageXSLT – eXtensible Style Language Transformation



5

<XML></XML>

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 < >•<tag>Data</tag>

XML consists of: •Elements <language>•Attributes <language type=“EN”>

6

<XML></XML>

XML is platform independentXML is flexible and reusableXSLT displays the XML in a variety of formats•XHTML•XML•Text document (.txt)



7

XML Schema

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.

Defines anelement calledsectionNamethat can onlycontain stringdata (text)

8

Getting to Know InfoPath

Use layout tables to organize and design formsFormat text and add colorInsert hyperlinks, images, add borders and shading to layout tables



9


Add functionality with controls•Radio buttons•Checkboxes•Calendar •Drop-down lists

10


Create optional sections that are viewable when neededKeeps the form clear and easier to read



11


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

12


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



13


1. Determine content to display

2. Create the data source fields• Use descriptive

names• No spaces in names

14

Example Documents

Requirements documentDesign documentInstructional analysis

StoryboardFunctional specificationsFlowcharts



15

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.

16

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.



17

Design TipsUse layout tables to organize the data fields•First, create the layout table

•Table > Insert >Layout TableOR

•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

18

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.



19

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

Getting Started with Microsoft InfoPath

InfoPath Interface

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

Form Area Task Pane


2

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.

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.

Field

Group

Repeating Group


3

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.


4

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. -OR-

2. 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)


5

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.


6

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.


7

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.


8

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.


9

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. Double-click the InfoPath document to generate a template file. 2. Enter the information required. 3. Choose File > Save or Save as to save the file. 4. Give the file a name. 5. 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.


10

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.


11

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 right-click and choose Copy.

2. Click in the place in the Word document where you want to add the picture and click Paste.

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 1 Scene Name Introduction

Scene Directions

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

Section Number 1 Screen Visuals/Action Script

Show the full cell cycle to

demonstrate what happens during

cell division.

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 2 Screen Visuals/Action Script

Show interphase steps in the cell. 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


Provide a visual that demonstrates the

waiting/time.

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

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

Screen Text Interphase [END OF SCENE]

Scene Scene Number 2 Scene Name Interphase

Scene Directions


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 1 Scene Name Introduction

Scene Directions

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

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 2 Scene Name Interphase

Scene Directions Section Number 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 1 Section Number

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 Interphase

Scene Number 2 Section Number

Screenshot 1

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

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]

Rapid Storyboarding with Microsoft InfoPath

Documents

Transcript of Rapid Storyboarding with Microsoft InfoPath