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
Advanced Topics in e-Learning Instructional DesignJune 15 & 16, 2006
Page 2Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.
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
Advanced Topics in e-Learning Instructional DesignJune 15 & 16, 2006
Page 3Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.
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)
Advanced Topics in e-Learning Instructional DesignJune 15 & 16, 2006
Page 4Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.
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
Advanced Topics in e-Learning Instructional DesignJune 15 & 16, 2006
Page 5Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.
9
Getting to Know InfoPath
Add functionality with controls•Radio buttons•Checkboxes•Calendar •Drop-down lists
10
Getting to Know InfoPath
Create optional sections that are viewable when neededKeeps the form clear and easier to read
Advanced Topics in e-Learning Instructional DesignJune 15 & 16, 2006
Page 6Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.
11
Getting to Know InfoPath
Repeating tables and sections allow users to expand sections when completing a form. Users can add more information when needed
12
Getting to Know InfoPath
Can create multiple views of the data Different views for different tasks or people
Advanced Topics in e-Learning Instructional DesignJune 15 & 16, 2006
Page 7Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.
13
Getting to Know InfoPath
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
Advanced Topics in e-Learning Instructional DesignJune 15 & 16, 2006
Page 8Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.
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.
Advanced Topics in e-Learning Instructional DesignJune 15 & 16, 2006
Page 9Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.
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.
Advanced Topics in e-Learning Instructional DesignJune 15 & 16, 2006
Page 10Session 401 – Rapid Storyboarding with Microsoft InfoPath, Maria Leggett, Textron, Inc.
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
Getting Started with Microsoft InfoPath
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
Getting Started with Microsoft InfoPath
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.
Getting Started with Microsoft InfoPath
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)
Getting Started with Microsoft InfoPath
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.
Getting Started with Microsoft InfoPath
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.
Getting Started with Microsoft InfoPath
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.
Getting Started with Microsoft InfoPath
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.
Getting Started with Microsoft InfoPath
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.
Getting Started with Microsoft InfoPath
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.
Getting Started with Microsoft InfoPath
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
Section Number 3 Screen Visuals/Action Script
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
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 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]