1

Developing a Website

Boston University – METTM448 – Spring 2013Marcus Goncalves

Many of the topics we will cover are based on a book that I would highly recommend to anyone who is involved in the process of developing or managing the development of a web-based technology solution. This is a great book. It is not too technical but it provides a good set of guidelines for getting started.The Book is “Web Style Guide” by Patrick Lynch and Sarah Horton. The Second Edition is ISBN 0300088981

The book is free online at www.webstyleguide.com

Slide 2

A Great Book

An Experiment:

Let’s say you are tasked with building an E-Commerce web site. Let’s work together as a team to brainstorm on how to proceed.

What you know is that your company wants you to build a web site to sell high-end children’s swing sets.

Slide 3

Let’s try Something

Given an assignment such as this, what questions would you ask before you get started with the project?

Slide 4

The First Questions to Ask?

1) Identify ALL the requirements for the site

1) Including a complete understanding of how the store needs to function, what limits and restrictions there are, etc.

2) Use Cases …

2) Identify the budget and resources available for the project

3) Identify the Schedule Requirements

4) Identify Internal and External Dependencies such as

1) Communication with External Networks and Databases

2) External Customer Interactions and Communications

3) Sign-Off Teams Slide 5

Questions

Slide 6

How to get Started • Review and Sign off on the Requirements Documents• Establish a set of Processes for handling

– Project Plan/Schedule Signoff– Spec Doc reviews and Signoff– Reporting, Prioritizing and assigning Issues and Bugs to be fixed– Communication and reporting to team members (email groups)– Tools to use for Source Control and Bug Tracking and Schedule Tracking.– Document Standards– Coding Standards

• Assemble the team for a Kick-Off- Don’t forget QA, IT, Marketing, Release Management

Folks- Establish Roles and Responsibilities- Schedule regular team meetings to review

- Task lists, Schedule, Issues that need to be resolved,

etc. • Put together a Schedule of tasks including:

- Time to write specs, test plans, test cases- Dev, QA, Release Management, Marketing, Training

Tasks- Usability Studies, Beta Testing, Site Update Process- Milestones

- Give team members their first assignments Slide 7

… and

Given a typical web site, what are the major categories of tasks you would establish?Based on those, what are some of the more specific tasks you would add?

Slide 8

Project Plan Tasks

Typically, a Web Development team is comprised of:• Someone from Marketing or Product Management Driving the Requirements• A Project Manager managing the daily tasks and tracking the schedules• Developers (Architect, Software and Database)• Designer• Release Managers (building and posting updates to Dev, QA, Stage, Production Servers)• IT Engineers to assist with network-related requirements

What are some other Team Members you would expect?Depending on Budget, this team may be 1 person or 100.

Slide 9

Typical Team

Now that you are ready to get started, what are some of the first tasks that must be completed early in the process?• Infrastructure Requirements (Hardware, Software, Security, Network, etc.)• Technology Decisions (OS, Web Server SW, Programming Languages used for Client and Server-Side development, Database Selection, Firewalls, Load Balancing, Web Hosting)• Based on the Product Requirements (User Types, Browsers to support, Internet Connection Speed Requirements, Languages to support, Countries to support, etc.) You may have to plan ahead for broader requirements in the future.• Support, Training and Maintenance – Identify what resources will be responsible for ongoing support and maintenance of the site. Slide 10

First Decisions to Make

• One of the first projects should be to establish a site map to make sure you cover all topics and paths to meet the site requirements.• Make sure you have logical and complete coverage of content and functionality.• What is a site map and who uses it?

Slide 11

Site Map

I like to start a site map by selecting from a standard set of web pages and expanding on them as needed. There are a couple of categories of these pagesUser Pages – pages the normal customers of the site use and seeSite Administration Pages – Pages that site administrators use to manage the web siteHosting Administration Pages – Usually provided by the Web Hosting Company – Setup Email, etc.

For a more comprehensive list of Typical Web Site Page Options, See Handout.

Slide 12

Getting Started with your Site Map

• Try to keep the hierarchy of your site relatively horizontal• You should not have more than 7-10 primary categories of pages on your site menu. • You should be able to reach almost any page on the site with a few mouse clicks. If you take the time to categorize properly, you can achieve this.• Consider easy ways to traverse the site map tree to reach related topics

Slide 13

More on the Site Map

Start by reviewing and understanding the Requirements and Site Map documents. The site should be designed…• for usability, functionality, visibility, use of colors, shapes, graphics, load speed, traffic requirements, etc.• for the appropriate user level• to maximize the utilization of search engines• so it is something that developers can actually develop• so QA can test with automated testing tools• so bookmarking pages on the site works as expected• to work well with the colors and fonts of the company or product logo

Slide 14

Design your Site

Keep in mind that…You want to be able to update the content easily without disrupting serviceYou may have to localize your web site to other countries/languagesYou want a cool looking site that is not boringIt is easier if you establish a standard page layout for all pages to follow

Slide 15

Design your Site (2)

Also, remember…To utilize some common standard elements on each page (Links to Home Page on all Primary Pages, Email Webmaster, Links to site map, privacy policy, licensing info, Help, etc.)Be considerate of Low Vision Users – Contrast and Colors can make a big difference.!!! Very Important! Make sure is it obvious to the user how they can contact you to purchase your products or ask questions about them.

Slide 16

Design your Site (3)

Have someone review your design for…- Look and Feel- Usability- Functionality- Complimentary Colors and ThemesAnd update as you see fit.Then get signoff from the Team, Marketing or the customer.

Slide 17

Design Review

• All development tasks should be documented with specification documents. By analyzing the Requirements your team should be able to assemble a comprehensive set of specification documents.

• What items do you feel should be included in this document?

• When is a Spec complete?

• Don’t forget to have a signoff.Slide 18

Specifications

•Database Schema including tables, indexes, default settings, etc.•Database coding (Stored procedures, interfaces)• Front-End Web Page Development• Back-End Scripting and Coding• Server-Side Applications, DLL’s, etc.

Slide 19

Development

• Interface with Shopping Cart Software•Getting an SSL Certificate•Credit Card Processing Services•Shipping Carriers and Rates• Inventory Database•Order Processing Systems (or is this your OPS?)

Slide 20

External Entities

What is unit testing?

Give some examples of how unit testing is performed.

Slide 21

Unit Testing

What is Integration Testing?

Who is responsible for this?

Slide 22

Integration Testing

Server Side•Server Operating System (Linux, Unix, Windows, Mac, and many others)•Web Server Software (Apache, Netscape, IIS, SunONE, etc.)•Database Engines (Oracle, MySQL, Microsoft SQL Server, etc.)•Server-Side Scripting (JSP, ASP, PHP, Perl, CGI, Python, Cold Fusion, etc.) using languages (JavaScript, Java, VBScript, etc.)•Programming Languages for Server-Side Applications, Applets, Servlets such as Java, C++, C#, VB.Net and many more.•Client-Side (Browser) Scripting Languages (JavaScript, VBScript)•Client-Side (In the Browser) Helper Applications (Java Applets, ActiveX Controls)

Slide 23

Technology Decisions

• Firewall• Load Balancing• Failover/Mirroring• Virus Scanning• Servers (number, types, power, speed, etc.)• Dev/QA/Stage/Production hardware

Slide 24

Hosting Decisions

QA should develop a test plan and a set of test cases that proves that the site requirements and use case requirements are met. Test the site and evaluate it for Core FunctionalitySpelling, Grammar, Look and FeelUsability and FunctionalityBroken images and linksReview the Code for

Accurate documentation, Matching/Closing Tags, Syntax Errors.

What Else...?

Slide 25

Testing

• Install all database, application, web page updates.•Test on the production web site to make sure there are no environment variables that effect functionality.•How to handle updates.

Slide 26

Release

Let’s briefly discuss some situations that may occur as the teams interact with each other.- Lack of Requirements- Coders don’t want to document- QA is left out- Management wants screen shots right away- Scope Creep - Schedule Changes

Slide 27

Inter and Intra-Team Dynamics

Maintaining the web site.• Make sure the site is up• Make sure the customers are not experiencing problems (review error pages)• Check for performance issues• Check security, virus, hacking situations

Updating the siteContent, Products, Bug fixes, etc.

Slide 28

Maintenance and Updates

Slide 29

Questions?