Multimedia & Website DesignMultimedia & Website Design

Working in TeamsWorking in Teams

This weekThis week

Look at team work issues in web designLook at team work issues in web design

Plan file and directory conventionsPlan file and directory conventions

Introduce formal software design Introduce formal software design methodologymethodology

Working in a teamWorking in a team

Working by yourself is easy to organiseWorking by yourself is easy to organiseSharing responsibilities with a team of Sharing responsibilities with a team of

people takes more effortpeople takes more effortNeed to have clear understanding of how a Need to have clear understanding of how a

site is to be builtsite is to be builtTeam members need to know who is Team members need to know who is

implementing each planned featureimplementing each planned feature

Team membersTeam members

Project managerProject manager– Sometimes Web Producer, general team Sometimes Web Producer, general team

leadershipleadership

Front-end designerFront-end designer– Responsible for look and feel of web pagesResponsible for look and feel of web pages

Back-end programmerBack-end programmer– Developing software applicationsDeveloping software applications

Content AuthorsContent Authors– Supplying the copy for page contentSupplying the copy for page content

Need for Need for agreementagreement

Development teams can be spread Development teams can be spread geographically or organisationallygeographically or organisationally

Early in the implementation process a set of Early in the implementation process a set of conventions need to be agreed to conventions need to be agreed to standardise a way of workingstandardise a way of working

Agree policies about uniformity or diversityAgree policies about uniformity or diversity

Directory Directory conventionsconventions

Agree terminology for page elements on Agree terminology for page elements on wireframeswireframes

Plan a set of directories for the site map sub-Plan a set of directories for the site map sub-sectionssections

Some rules are Operating System basedSome rules are Operating System based– E.g. avoid spaces in UNIX filenamesE.g. avoid spaces in UNIX filenames– Use .htm not .html on older WindowsUse .htm not .html on older Windows

Policy decisions Policy decisions

Should all images be stored in a top-level Should all images be stored in a top-level folder?folder?

Depends on site architectureDepends on site architecture

Lots of commonality - yesLots of commonality - yes

Different look and feel for subsections - noDifferent look and feel for subsections - no

StylesheetsStylesheets

Pages can be split into logical sections in Pages can be split into logical sections in wireframeswireframes

Use section names to create logical class Use section names to create logical class selector names for stylesheetsselector names for stylesheets

Can then use <div> tags to indicate which Can then use <div> tags to indicate which style rules apply to areas of the pagestyle rules apply to areas of the page

Use same naming convention throughoutUse same naming convention throughout

Class task #1Class task #1

Using the wireframes, site maps and primary Using the wireframes, site maps and primary nav ideas from your work on The nav ideas from your work on The Lightness, construct an appropriate set of Lightness, construct an appropriate set of directories to hold your web site.directories to hold your web site.

Introducing UMLIntroducing UML

What is UMLWhat is UML

You wouldn’t build a house without a plan!You wouldn’t build a house without a plan!

Method to document software designMethod to document software design

Released in 1997 by Object Oriented Released in 1997 by Object Oriented designersdesigners

Equivalent to electrical circuit diagramsEquivalent to electrical circuit diagrams

BenefitsBenefits

1.1. Software is designed and documented Software is designed and documented before it is codedbefore it is coded

2.2. Reusable code can be spotted during the Reusable code can be spotted during the design process leading to efficient designdesign process leading to efficient design

3.3. Logic holes can be spotted earlyLogic holes can be spotted early

4.4. Overall design dictates development Overall design dictates development approachapproach

Benefits cont…Benefits cont…

5.5. Able to see the big picture and plan Able to see the big picture and plan details like memory usedetails like memory use

6.6. Documentation makes later changes Documentation makes later changes easiereasier

7.7. Allows new engineers to follow the Allows new engineers to follow the designsdesigns

8.8. Efficient way to communicate with Efficient way to communicate with contractors or other programmerscontractors or other programmers

The old way of The old way of workingworking

Waterfall method of Waterfall method of modellingmodelling

Steps follow in set orderSteps follow in set order

Coding tends to Coding tends to dominate timescalesdominate timescales

No feedbackNo feedback

Analysis

Design

Coding

Deployment

Rapid Application Rapid Application DevelopmentDevelopment

1.1. Requirements gatheringRequirements gathering

2.2. AnalysisAnalysis

3.3. DesignDesign

4.4. DevelopmentDevelopment

5.5. DeploymentDeployment

Requirements Requirements GatheringGathering

Discover Business ProcessesDiscover Business Processes

Perform Domain AnalysisPerform Domain Analysis

Identify Cooperating SystemsIdentify Cooperating Systems

Discover System RequirementsDiscover System Requirements

Present Results to ClientPresent Results to Client

AnalysisAnalysis

Understanding system usageUnderstanding system usageFlesh out use casesFlesh out use casesRefine class diagramsRefine class diagramsAnalyse changes of state in objectsAnalyse changes of state in objectsDefine interactions among objectsDefine interactions among objectsAnalyse interaction with cooperating Analyse interaction with cooperating

systemssystems

DesignDesign

Further depth and refinement to the Further depth and refinement to the diagrams developed earlier in the processdiagrams developed earlier in the process

Involvement of programmers to gather Involvement of programmers to gather appropriate inputappropriate input

Develop testing strategies Develop testing strategies

DevelopmentDevelopment

With the groundwork done, this section With the groundwork done, this section ought to be easy!ought to be easy!

Test all the codeTest all the code

Test interactions between codeTest interactions between code

Document the systemDocument the system

DeploymentDeployment

Backup and recovery planBackup and recovery plan

Install on appropriate hardwareInstall on appropriate hardware

Test on installed hardwareTest on installed hardware

Party on!Party on!

UML ComponentsUML Components

Class DiagramClass Diagram

Object DiagramObject Diagram

Use Case DiagramUse Case Diagram

State DiagramState Diagram

Sequence DiagramSequence Diagram

Activity DiagramActivity Diagram

Collaboration DiagramCollaboration Diagram

Component DiagramComponent Diagram

Deployment DiagramDeployment Diagram

UML Activity DiagramsUML Activity Diagrams

Basic NotationBasic Notation

Similar to flow-chartsSimilar to flow-charts

Shows steps (activities)Shows steps (activities)

When an activity is When an activity is completed - automatic completed - automatic transition (arrow) to next transition (arrow) to next stagestage

Activity 1

Activity 2

DecisionsDecisions

Either show multiple Either show multiple paths coming out of an paths coming out of an activityactivity

Or represent decision Or represent decision as small diamondas small diamond

Decision outcomes Decision outcomes labelled on transitionslabelled on transitions

Start Car

Drive Walk

[No Petrol][Petrol]

Concurrent PathsConcurrent Paths

Can show activities that Can show activities that happen at the same happen at the same timetime

Paths can merge again Paths can merge again laterlater

Use a bold line to show Use a bold line to show splitsplit

Wake Up

EatToast

DrinkCoffee

Go to work

SignalsSignals

Possible to send a signal during a sequence Possible to send a signal during a sequence of activitiesof activities

When received, an activity takes placeWhen received, an activity takes place

SendRecv

SwimlanesSwimlanes

Divide activities by Divide activities by rolesroles

Transitions can Transitions can take place from one take place from one lane to anotherlane to another

Ideally roles are Ideally roles are independent independent