Webbased Tutorial Storyboard Web Application Design Lab Classes

Web-based Tutorial Storyboard Web Application Design Lab Classes Mark K. Reha AET/545 University of Phoenix

Agenda q Introduction q Instructional Goals q Performance-Based Objectives q Storyboards q Designer Notes q Content Notes q Instructional Notes q 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 Power. Point presentation. Ø The website will be divided into the following modules: q Home Module – initial landing page for the class q Classroom Module – pages to the Lecture materials q Lab Module – pages to access the programming labs q 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: q q 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) Links to Classroom Materials Lab (Labs Page) Power. Point Lectures Online Help (Online Page) Lecture Videos EA Sparx UML Models. NET Solution File Lab 1 (Lab 1 Pages) Lab 2 (Lab 2 Pages) Help (Help Page) 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 Previous Page Screen Shot 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 i. Web development tool. Ø Use the i. Web Modern Frame Theme. Ø Technical Design Considerations: q q Page will be sized at 800 x 600 pixels Popup Windows will be sized at 500 x 400 pixels. Graphical icons will be sized at 30 x 30 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: q 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 q 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: q Use the standard On The Edge Software Consulting company logo. q Use the standard On The Edge Software Consulting company legal copyright. Copyright© 2011 On The Edge Software Consulting q 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: q Graphics: ü Use the JPG and GIF standards ü Use JPG for screenshots (favor quality over compression ü Use GIF for toolbar icons (use transparent backgrounds) q Audio: ü Not required q Video: ü Use the MPEG 4 (M 4 V) standard

Designer Notes 5 of 5 Ø Lecture materials will be available for download via a hyperlink to a Power. Point presentation from the Classroom Module. Ø The following additional lecture materials will be available via hyperlinks from the Classroom Module: q Video’s of lectures q EA Sparx UML Models q. 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 v Home Module: 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 v Classroom Module: 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 v Lab Module: 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 v Lab 1 – Presentation Layer (Part 1): q 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. q 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 v Lab 2 – Presentation Layer (Part 2): q Goals: 1. Create a Canonical Object Model that conforms to the User Registration requirements. 2. Create a View Model 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. q 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 v Lab 3 – Services Layer: q 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. q 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 v Lab 4 – Putting It All Together: q Goals: 1. Wire up the Business Services Layer to the Presentation Layer. 2. Implement support for (simple) Data Validation (in the Presentation Layer). q 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 v Help Module: o List of Frequently Asked Questions. o List of External Resources available for the class. o Support contact information. support@ontheedgesc. com

Assessment Notes v 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 Power. Point 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/