Multimedia & Website Design Working in Teams

This week Look at team work issues in web design Plan file and directory conventions Introduce formal software design methodology

Working in a team Working by yourself is easy to organise Sharing responsibilities with a team of people takes more effort Need to have clear understanding of how a site is to be built Team members need to know who is implementing each planned feature

Team members Project manager –Sometimes Web Producer, general team leadership Front-end designer –Responsible for look and feel of web pages Back-end programmer –Developing software applications Content Authors –Supplying the copy for page content

Need for agreement Development teams can be spread geographically or organisationally Early in the implementation process a set of conventions need to be agreed to standardise a way of working Agree policies about uniformity or diversity

Directory conventions Agree terminology for page elements on wireframes Plan a set of directories for the site map sub- sections Some rules are Operating System based –E.g. avoid spaces in UNIX filenames –Use.htm not.html on older Windows

Policy decisions Should all images be stored in a top-level folder? Depends on site architecture Lots of commonality - yes Different look and feel for subsections - no

Stylesheets Pages can be split into logical sections in wireframes Use section names to create logical class selector names for stylesheets Can then use tags to indicate which style rules apply to areas of the page Use same naming convention throughout

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

Introducing UML

What is UML You wouldn’t build a house without a plan! Method to document software design Released in 1997 by Object Oriented designers Equivalent to electrical circuit diagrams

Benefits 1. Software is designed and documented before it is coded 2. Reusable code can be spotted during the design process leading to efficient design 3. Logic holes can be spotted early 4. Overall design dictates development approach

Benefits cont… 5. Able to see the big picture and plan details like memory use 6. Documentation makes later changes easier 7. Allows new engineers to follow the designs 8. Efficient way to communicate with contractors or other programmers

The old way of working Waterfall method of modelling Steps follow in set order Coding tends to dominate timescales No feedback Analysis Design Coding Deployment

Rapid Application Development 1. Requirements gathering 2. Analysis 3. Design 4. Development 5. Deployment

Requirements Gathering Discover Business Processes Perform Domain Analysis Identify Cooperating Systems Discover System Requirements Present Results to Client

Analysis Understanding system usage Flesh out use cases Refine class diagrams Analyse changes of state in objects Define interactions among objects Analyse interaction with cooperating systems

Design Further depth and refinement to the diagrams developed earlier in the process Involvement of programmers to gather appropriate input Develop testing strategies

Development With the groundwork done, this section ought to be easy! Test all the code Test interactions between code Document the system

Deployment Backup and recovery plan Install on appropriate hardware Test on installed hardware Party on!

UML Components Class Diagram Object Diagram Use Case Diagram State Diagram Sequence Diagram Activity Diagram Collaboration Diagram Component Diagram Deployment Diagram

UML Activity Diagrams

Basic Notation Similar to flow-charts Shows steps (activities) When an activity is completed - automatic transition (arrow) to next stage Activity 1 Activity 2

Decisions Either show multiple paths coming out of an activity Or represent decision as small diamond Decision outcomes labelled on transitions Start Car Drive Walk [No Petrol] [Petrol]

Concurrent Paths Can show activities that happen at the same time Paths can merge again later Use a bold line to show split Wake Up Eat Toast Drink Coffee Go to work

Signals Possible to send a signal during a sequence of activities When received, an activity takes place Send Recv

Swimlanes Divide activities by roles Transitions can take place from one lane to another Ideally roles are independent