Web-based Tutorial StoryboardWeb Application Design Lab Classes

Mark K. Reha

AET/545University of Phoenix

Agenda

Introduction

Instructional Goals

Performance-Based Objectives

Storyboards

Designer Notes

Content Notes

Instructional Notes

Questions and Comments

Introduction 1 of 2

The website will support 4 Hands-On programming labs to support an existing Web Application Design class that is being taught using face-to-face lectures that utilize a PowerPoint presentation.

The website will be divided into the following modules: Home Module – initial landing page for the class Classroom Module – pages to the Lecture materials Lab Module – pages to access the programming labs Help Module – pages to access online help and FAQ’s

Introduction 2 of 2

The Hands-On programming Labs will be supported by allowing the student to access the Face-to-Face classroom lecture materials from the website.

The students will build an actual web application during the Hands-On programming Labs to apply learning concepts learned in the Face-to-Face classroom lectures.

The Lab Module will be divided into the following Labs: Presentation Layer (part 1) Presentation Layer (part 2) Business Services and Data Access Services Layer End to end (putting it all together)

Instructional Goals 1 of 2

Instructional Goals (Reha, 2011) for the Lab class:① Provide the students with a series of hands-on

programming labs that can be used to augment the classroom lectures for the Web Application Design class so they can apply the learning objectives from the lectures using practical hands-on programming experience.

② Provide the students an opportunity to build a N-Layer web application using the business requirements and the Unified Modeling Language (UML) models developed from the lectures in the Web Application Design class.

③ Incorporate the Event-Driven Design methodology learned from the lectures during the development of the web application built in the hands-on programming labs.

Instructional Goals 2 of 2

④ Incorporate the Design by Contract methodology learned from the lectures during the development of the web application built in the hands-on programming labs.

⑤ Implement the business process from the Unified Modeling Language (UML) models developed from the lectures during development of the web application built in the hands-on programming labs.

⑥ Implement and apply common industry design patterns, such as the Model View Controller and Data Access Object design patterns, in the development of the web application built in the hands-on programming labs.

Performance-Based Objectives 1 of 2

Performance-Based Objectives (Reha, 2011) for the Lab class:① The students will be able to demonstrate the ability to

create a default .NET MVC project.② The students will be able to demonstrate how to

implement a .NET MVC View page that conforms to the business requirements discussed in the Web Application Design class lectures.

③ The students will be able to apply an Event-Driven design methodology to implement the .NET MVC Controller used to design the Presentation Layer of a web application.

④ The students will be able to demonstrate the ability to convert and map HTML DOM events to the appropriate .NET MVC Action Methods that will be processed by the .NET MVC Controller class.

Performance-Based Objectives 2 of 2

⑤ The students will be able to demonstrate how to develop an enterprise canonical object model and enterprise canonical services model used to support the Business Services Layer of a web application.

⑥ The students will be able to demonstrate how to develop the data persistence services using the Data Access Object design pattern used to implement the Data Access Layer of a web application.

⑦ The students will be able to demonstrate how to develop a data validation strategy using the .NET framework.

⑧ The students will be able to demonstrate a fully functioning N-Layer web application.

⑨ The students will be able to identify at least 10 industry best practices that have been incorporated into the functional N-Layer web application.

⑩ The students will be able to develop maintainable code and demonstrate this objective by performing a peer code review on another student’s application code.

Storyboard 1 of 7

Modern FrameTheme

Logo

Main Menu

Content

Copyright and Disclaimer

Page Title

General Website Page Layout

Storyboard 2 of 7

Lab 1(Lab 1 Pages)

Lab 2(Lab 2 Pages)

Lab 3(Lab 3 Pages)

Lab 5(Lab 4 Pages)

Online Help(Online Page)

FAQ(FAQ Page)

Links toClassroom

MaterialsLecture Videos

EA Sparx UML Models

.NET Solution File

PowerPoint Lectures

Classroom(Lecture Page)

Lab(Labs Page)

Help(Help Page)

Class Home(Welcome Page)

Sitemap Design

Storyboard 3 of 7

Logo

Main Menu

Instructional Goals

Copyright and Disclaimer

Lab Title

Lab Page Layout

Lab Content

Lab Navigation

See slide 18

See slide 14

See slide 18

See slide 15

See slide 21-28

Storyboard 4 of 7

Materials will be available using context sensitive help. Toolbar with be designed using graphical icons. Toolbar will popup a window for online Lab assistance. Toolbar will provide the following functionality:

Example:Do something in the lab.

Toolbar IconAdditional Information

Lecture Notes

Code Snippet

Help

Storyboard 5 of 7

Lab Page

LabInformation

Page

LectureNotesPage

CodeSnippet

Page

HelpPage

Lab steps:

PopupWindows

Lab Page Online Content Sensitive Help System Design

Previous Page Next PageScreen Shot

Toolbar

Storyboard 6 of 7

Navigation within the Site

1.Main Menu Items:① Home – navigates to Home Module

② Classroom – navigates to Classroom Module

③ Lab – navigates to Lab Module

④ Help – navigates to Help Module

2.Hyperlinks also will be used within the pages.3.Navigation Bar within the Lab Module:

① Right Arrow Icon to Next Page within the Lab② Left Arrow Icon to Previous Page within the Lab

Storyboard 7 of 7

Lab Navigation

1.Labs will be a sequence of pages (like a Wizard) and will use a Navigation Bar to traverse between the pages.2.Will use the Navigation Icons in the Navigation Bar.

Navigation Bar

Next PagePrevious Page

Designer Notes 1 of 5

Use the Apple iWeb development tool. Use the iWeb Modern Frame Theme. Technical Design Considerations:

Page will be sized at 800x600 pixels Popup Windows will be sized at 500x400 pixels. Graphical icons will be sized at 30x30 pixels. Will be designed and tested to support the

following browsers: Internet Explorer 7+ Firefox 3.0+ Safari 3+

Designer Notes 2 of 5

Fonts and Colors: Use the default fonts installed with the Theme.

Helvetica Neue 36 for page titles Helvetica Neue 18 bold for content headings Helvetica Neue 14 for content

Use the default colors installed with the Theme. Web safe Black (#333333) for text Web safe White (#FFFFFF) for backgrounds Web safe Red (#993333) for hyperlinks

Designer Notes 3 of 5

Branding: Use the standard On The Edge Software Consulting

company logo.

Use the standard On The Edge Software Consulting company legal copyright.

Use the standard On The Edge Software Consulting company disclaimer.

Copyright© 2011 On The Edge Software ConsultingCopyright© 2011 On The Edge Software ConsultingCopyright© 2011 On The Edge Software ConsultingCopyright© 2011 On The Edge Software Consulting

All content in this online class is property of On The Edge Software Consulting. Content cannot be used or distributed without written permission of On The

Edge Software Consulting

All content in this online class is property of On The Edge Software Consulting. Content cannot be used or distributed without written permission of On The

Edge Software Consulting

Designer Notes 4 of 5

Multimedia Design Considerations: Graphics:

Use the JPG and GIF standards Use JPG for screenshots (favor quality over

compression Use GIF for toolbar icons (use transparent

backgrounds) Audio:

Not required Video:

Use the MPEG 4 (M4V) standard

Designer Notes 5 of 5

Lecture materials will be available for download via a hyperlink to a PowerPoint presentation from the Classroom Module.

The following additional lecture materials will be available via hyperlinks from the Classroom Module: Video’s of lectures EA Sparx UML Models .NET Solution Files

All technical content, such as UML Models, Lab Project files, Code Snippets, and Screen Shots can be obtained from the Information Technology (IT) team.

Content Notes 1 of 8

Home Module:o Welcome paragraph with a description of the class.o List of courses available within the class (see slide 31).o List of labs available for the class (see slide 4).o Description of navigational controls used in the site.

Content Notes 2 of 8

Classroom Module:o Introduction paragraph with a description of the class.o Summary of learning goals.o Links to classroom videos.o Links to classroom and lab materials (see slide 20).

Content Notes 3 of 8

Lab Module:o Introduction paragraph with a description of the Labs.o Hyperlinks to each of the Labs (see slide 4 and details below).o Description of toolbar control used in the Labso Description of navigational controls used in the Labs.o Description of Lab Prerequisites that must be completed.o Within each Lab:

Summary of learning objectives. Step by step instructions for building the web application. Use developer tool screen shots where necessary. Use code snippets where necessary. Must have steps for validation that the lab is working. Summary of learning objectives met. Assessment (see slide 29)

Content Notes 4 of 8

Lab 1 – Presentation Layer (Part 1): Goals:

1. Create a View that conforms to the User Registration user interface requirements defined in the classroom.

2. Create an Action Method Controller and Action Methods to support the Event-Driven use cases.

3. Extends the MVC 2 Default Application menu to render the User Registration user interface.

Steps (very high level):• Step 1 of 4 – Create a default .NET MVC 2 Application.• Step 2 of 4 – Create the shell User Registration Controller and

View.• Step 3 of 4 – Create the User Registration View and Controller

Register and Is Member Action Methods.• Step 4 of 4 – End to End Testing.

Content Notes 5 of 8

Lab 2 – Presentation Layer (Part 2): Goals:

1. Create a Canonical Object Model that conforms to the User Registration requirements.

2. Create a View Model that that conforms to the User Registration requirements.

3. Update the stub implementations for all the Action Methods.4. Bind the User Registration View Model to the User Registration

View using .NET Html Helper classes.5. Wire up a new View page to an Action Method.

Steps (very high level):• Step 1 of 3 – Create the Canonical Object Model and the View

Model.• Step 2 of 3 – Wire up (Data Binding) the View Model to the

View.• Step 3 of 3 – End to End Testing.

Content Notes 6 of 8

Lab 3 – Services Layer: Goals:

1. Create a Canonical Services Model that conforms to the User Registration requirements.

2. Create supporting Application Exception classes and Utility classes.

3. Implement the Create User Business Process.4. Implement the Register User Business Process that conforms

to the User Registration requirements. Steps (very high level):

• Step 1 of 4 – Create the Canonical Service Model and Utility Services.

• Step 2 of 4 – Code the Utility Services.• Step 3 of 4 – Code the Application Exception Classes and Stub

Data Access Services.• Step 4 of 4 – Code the Create User Business Process and

Register User Business Process.

Content Notes 7 of 8

Lab 4 – Putting It All Together: Goals:

1. Wire up the Business Services Layer to the Presentation Layer.

2. Implement support for (simple) Data Validation (in the Presentation Layer).

Steps (very high level):• Step 1 of 5 – Update the On Page Action Method to create a

default new User.

• Step 2 of 5 – Update the Register User Action Method to call the Register User Business Process.

• Step 3 of 5 – End to End Testing.

• Step 4 of 5 – Add Data Validation to the Presentation Layer.

• Step 5 of 5 – End to End Testing.

Content Notes 8 of 8

Help Module:o List of Frequently Asked Questions.o List of External Resources available for the class.o Support contact information.

support@ontheedgesc.comsupport@ontheedgesc.comsupport@ontheedgesc.comsupport@ontheedgesc.com

Assessment Notes

Assessment for each Lab will be accomplished by:

① Validating that the web application built in the Lab actually functions properly.

② Validating that the web application built in the Lab runs without crashing.

③ Validating that the web application built in the Lab meets the business requirements outlined in the lectures.

④ Validating that the code built in the Lab is commented, maintainable, and is implemented using industry best practices. This will be done via peer code reviews with team members in the class.

⑤ Answering a series of 5 open ended questions that are directly related to the concepts learned in the Lab.

Instructional Notes 1 of 2

• The Goals of the class can be found in the Resources (Reha, 2011) of this presentation.

• The Performance Based Objectives of the class can be found in the Resources (Reha, 2011) of this presentation.

• Face to face Lectures will be delivered using a PowerPoint presentation in a corporate training room. The Lectures will take a total of 8 hours to complete.

• Online Hands-on Programming Labs will be completed at various points during the lectures. The 4 Labs will each take about 1 hour to complete.

Instructional Notes 2 of 2

• The Web Application Design course consists of a combination of face to face lectures and online hands-on programming labs.

Lecture #1: Introduction to the Software Development Lifecycle. Lecture #2: Decomposing Requirements. Lecture #3: N-Layer Architecture. Lecture #4: Designing the Presentation Layer.

Lab 1: Building the Presentation Layer (part 1). Lab 2: Building the Presentation Layer (part 2).

Lecture #5: Designing the Business Services Layer. Lecture #6: Designing the Data Access Layer.

Lab 3: Building the Services Layer. Lecture #7: Industry Best Practices. Lecture #8: Putting It All Together.

Lab 4: Building the N-Layer Web Application.

Questions or Comments

???

Reha, M. K. (2011). Masters Online Portfolio – Web-Based Tutorial Assessment. On The Edge Software. Retrieved from http://www.ontheedgesc.com/masters/

Reha, M. K. (2011). Masters Online Portfolio – Web-Based Tutorial Overview. On The Edge Software. Retrieved from http://www.ontheedgesc.com/masters/

References