Transcript Organization Diversity Policy Presentation Elba Milagros

Web-based Tutorial Storyboard
Web Application Design Lab Classes
Mark K. Reha
AET/545
University 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 NLayer 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
General Website Page Layout
Page Title
Logo
Main Menu
Content
Copyright and Disclaimer
Modern Frame
Theme
Storyboard 2 of 7
Sitemap Design
Class Home
(Welcome Page)
Classroom
(Lecture Page)
Lab
(Labs Page)
Help
(Help Page)
PowerPoint Lectures
Links to
Classroom
Materials
Online Help
(Online Page)
Lecture Videos
EA Sparx UML Models
.NET Solution File
Lab 1
(Lab 1 Pages)
Lab 2
(Lab 2 Pages)
FAQ
(FAQ Page)
Lab 3
(Lab 3 Pages)
Lab 5
(Lab 4 Pages)
Storyboard 3 of 7
Lab Page Layout
See slide 18
Logo
See slide 14
Lab Title
Main Menu
Instructional Goals
See slide 21-28
Lab Content
See slide 15
Lab Navigation
See slide 18
Copyright and Disclaimer
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:
Toolbar
Additional Information
Lecture Notes
Code Snippet
Help
 Example:
Do something in the lab.
Icon
Storyboard 5 of 7
Lab Page Online Content Sensitive Help System Design
Lab
Information
Page
Lecture
Notes
Page
Code
Snippet
Page
Help
Page
Popup
Windows
Lab steps:
Toolbar
Screen Shot
Previous Page
Lab Page
Next Page
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.
Next Page
Previous Page
Navigation Bar
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.
Copyright© 2011 On The Edge Software Consulting
 Use the standard On The Edge Software Consulting
company disclaimer.
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
o
o
o
Welcome paragraph with a description of the class.
List of courses available within the class (see slide 31).
List of labs available for the class (see slide 4).
Description of navigational controls used in the site.
Content Notes 2 of 8
Classroom Module:
o
o
o
o
Introduction paragraph with a description of the class.
Summary of learning goals.
Links to classroom videos.
Links to classroom and lab materials (see slide 20).
Content Notes 3 of 8
Lab Module:
o
o
o
o
o
o
Introduction paragraph with a description of the Labs.
Hyperlinks to each of the Labs (see slide 4 and details below).
Description of toolbar control used in the Labs
Description of navigational controls used in the Labs.
Description of Lab Prerequisites that must be completed.
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.
[email protected]
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
???
References
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/