Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the...
Transcript of Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the...
![Page 1: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/1.jpg)
Advanced Software Engineering
Lecture 3: Software Designs
Prof. Harold Liu
8 October 2013
![Page 2: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/2.jpg)
OutlineWhat is software architecture?Typical software architectural stylesSpecific software architecturesDistributed system architecturesSoftware architecture patternsDesign patternsUI designs
![Page 3: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/3.jpg)
1 What is Software Architecture?Clements, Paul; Felix Bachmann, Len Bass, David Garlan, James Ivers, Reed Little, Paulo Merson, Robert Nord, Judith Stafford (2010). Documenting Software Architectures: Views and Beyond, Second Edition. Boston: Addison‐Wesley. ISBN 0‐321‐55268‐7.
“the high level structures of a software system. It can be defined as the set of structures needed to reason about the software system, which comprise the software elements, the relations between them, and the properties of both elements and relations”
This definition emphasizes the important role of “software elements”
![Page 4: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/4.jpg)
1.PatternThe elements of this language are entities called patterns. Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice. — Christopher Alexander Architectural pattern: a standard solution to architectural problems in software engineering ("strictly described and commonly available"), e.g.: OSI reference modelDesign pattern: a standard solution to common problems in software designGang of Four – 23 design patterns
Software Pattern and Style
![Page 5: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/5.jpg)
2.Software Style"An architectural style defines: a family of systems in terms of a pattern of structural organization; a vocabulary of components and connectors, with constraints on how they can be combined The main difference is that a pattern can be seen as a solution to a problem, while a style is more general and does not requirea problem to solve for its appearance.:
![Page 6: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/6.jpg)
3.Software Frameworka software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user‐written code, thus providing application‐specific software. A software framework is a universal, reusable software platform to develop applications, products and solutions. Software frameworks include support programs, compilers, code libraries, tool sets, and APIs that bring together all the different components to enable development of a project or solution.Typical examples include MVC and Struts
![Page 7: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/7.jpg)
The input data go through a series of calculations and operations and evetually form the output dataExamples: Pipe/filter, batch sequential processing
Data flow
2. Typical Software Styles
![Page 8: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/8.jpg)
![Page 9: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/9.jpg)
Call‐Return1.Main program/subroutine
divide the functionality into a control tree
![Page 10: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/10.jpg)
2.Layered architectureeach layer provides a set of services to the layers aboveencapsulates a set of implementations and lower‐level servicesrelies on services from the layers below
![Page 11: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/11.jpg)
Reference Model
Designed for specific application domains; an ideal software architecture that include all necessary features
![Page 12: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/12.jpg)
3. Warehouse
Hypertext, database, blackboard systemData warehouse situates at the centre of the architecture, othercomponents interact with it for CRUD
![Page 13: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/13.jpg)
4 Distributed System ArchitecturesCentralized computing era highly rely on the mainframes and high‐end servers
After 1980s, personal computer becomes available that eventuallyhelp generate the distributed computing model
Characteristics Disadvantages
![Page 14: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/14.jpg)
Simplest distributed system model.System composed of multiple processes which may (but need not) execute on different processors.Architectural model of many large real‐time systems.Distribution of process to processor may be pre‐ordered or may be under the control of a dispatcher.
Multiprocessor Architecture
![Page 15: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/15.jpg)
![Page 16: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/16.jpg)
The application is modeled as a set of services that are provided by servers and a set of clients that use these services.Clients know of servers but servers need not know of clients.Clients and servers are logical processesThe mapping of processors to processes is not necessarily 1:1.
Client/Server (C/S)
![Page 17: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/17.jpg)
![Page 18: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/18.jpg)
![Page 19: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/19.jpg)
Thin Client
Fat Client
![Page 20: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/20.jpg)
![Page 21: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/21.jpg)
![Page 22: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/22.jpg)
![Page 23: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/23.jpg)
Example: Internet Banking
![Page 24: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/24.jpg)
Summary of C/S Architecture
![Page 25: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/25.jpg)
Distributed Object Architectures
![Page 26: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/26.jpg)
Advantages
Example: data mining systems
![Page 27: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/27.jpg)
model‐view‐controller, that separate user inputs, data model and data representations
5 Architectural FrameworksMVC
![Page 28: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/28.jpg)
6. Design Patterns
What is design pattern?
Creational
Structural
Behavioral
![Page 29: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/29.jpg)
To solve a category of software problems and make it reusable
In the class and object level
More in the high‐level design stage
Key idea is to add the abstraction layer, to separate the variants from the invariants
What is Design Pattern?
![Page 30: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/30.jpg)
Pattern Name: we use to describe a design problem,
Problem: that describes when to apply the pattern, the causal relationship of the problem and potential preconditions that have to be satisfied in order to use the pattern
Solution: that describes the elements that make up the design
Consequences: that are the results and trade‐offs of applying the pattern.
Basic Elements of A Pattern
![Page 31: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/31.jpg)
![Page 32: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/32.jpg)
SOLID Principles
![Page 33: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/33.jpg)
"software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification“
such an entity can allow its behavior to be modified without altering its source code.
This is especially valuable in a production environment, where changes to source code may necessitate code reviews, unit tests, and other such procedures to qualify it for use in a product: code obeying the principle doesn't change when it is extended, and therefore needs no such effort.
Inheritance
Open/Closed Principle
![Page 34: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/34.jpg)
• every class should have a single responsibility, and that responsibility should be entirely encapsulated by the class. All its services should be narrowly aligned with that responsibility.
• The reason it is important to keep a class focused on a single concern is that it makes the class more robust
• Example:• interface Modem{• public void dial(String pno);• public void hangup();• public send(char c);• public char recv();• } • Modem class has 2 responsibilities: connection and communications,
should be separated
SRP
![Page 35: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/35.jpg)
LSP
Substitutability states that, if S is a subtype of T, then objects of type T may be replaced with objects of type S (i.e., objects of type S may be substituted for objects of type T) without altering any of the desirable properties of that program (correctness, task performed, etc.).
LSP is a particular definition of a subtyping relation, called (strong) behavioral subtyping
Example: is penguin a bird? Biological: yes, it is.LSP: no, it is not, since it cannot fly.
![Page 36: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/36.jpg)
DIP
High‐level modules should not depend on low‐level modules. Both should depend on abstractions.Abstractions should not depend upon details. Details should depend upon abstractions.
![Page 37: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/37.jpg)
![Page 38: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/38.jpg)
![Page 39: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/39.jpg)
ISP
No client should be forced to depend on methods it does
not use.
ISP splits interfaces which are very large into smaller and
more specific ones so that clients will only have to know
about the methods that are of interest to them.
Such shrunken interfaces are also called role interfaces.
ISP is intended to keep a system decoupled and thus
easier to refactor, change, and redeploy.
![Page 40: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/40.jpg)
ISP Example
![Page 41: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/41.jpg)
![Page 42: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/42.jpg)
Singleton Method
Factory Method
Abstract Factory Method
Builder Method
Prototype Method
Creational Design Patterns
![Page 43: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/43.jpg)
CompositeDecoratorProxyFlyweight FaçadeBridgeAdapter
Structural Design Patterns
![Page 44: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/44.jpg)
TemplateObserverIteratorChain of ResponsibilityMementoCommandStateVisitorInterpreterMediatorStrategy
Behavioral Design Patterns
![Page 45: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/45.jpg)
Singleton
The system only allows ONE window, ONE file system
A digital filter can have only ONE A/D converter
A accounting system can be used only in ONE company
![Page 46: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/46.jpg)
Singleton: Structure
Define an Instance method, allow clients to access its
unique instance
![Page 47: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/47.jpg)
public class Car{public void run(){System.out.prinln(“…”)};
}
public class Test{public static void main(String[] args)
Car c= new Car();c.run();
}
Example to make a car to run…
![Page 48: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/48.jpg)
public class Car{private Car(){}public static Car getInstance(){return new Car()};public void run(){System.out.prinln(“…”)};
}
public class Test{public static void main(String[] args)
Car c= Car.getInstance();c.run();
}
An improvement
![Page 49: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/49.jpg)
public class Car{private static Car car=new Car();private Car(){}public static Car getInstance(){return car;}public void run(){System.out.prinln(“…”)};
}
public class Test{public static void main(String[] args)
Car c1= Car.getInstance();Car c2= Car.getInstance()’if(c1==c2) System.out.println(“…”);c.run();
}
Finally…
![Page 50: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/50.jpg)
An Extension: MultitonPublic class Test{
public static void main(String[] args)Car c1= Car.getInstance();Car c2= Car.getInstance()’if(c1==c2) System.out.println();c.run();
}
Public class Car{private static Car car=new Car();private static List<Car> cars=new ArrayList<Car>();private Car(){
public static Car getInstance(){return car;}}public void run(){System.out.prinln(“”)};
}
![Page 51: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/51.jpg)
Factory Method
NEW an object: we have to know the exact class information of that object, but sometimes impossible, e.g., to watch a video needs to open up an player, but clients don’t know which player, as the job of the system to assign
to implement the concept of factories and deals with the problem of creating objects (products) without specifying the exact class of object that will be created.
The essence of this pattern is to "Define an interface for creating an object, but let the classes that implement the interface decide which class to instantiate.
The Factory method lets a class defer instantiation to subclasses."
![Page 52: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/52.jpg)
Structure
Product: define fun() to create object (product)
ConcreteProduct: implement product interface fun()
Factory: declare CreateProduct() return an object with Product class
![Page 53: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/53.jpg)
FileLog
EventLog
Example: Log Manager
// LogFactory classpublic abstract class LogFactory{public abstract Log Create();
}
![Page 54: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/54.jpg)
// FileFactorypublic class FileFactory:LogFactory{public override FileLog Create(){
return new FileLog();}
}
// EventFactorypublic class EventFactory:LogFactory{public override EventLog Create(){
return new EventLog();}
}
public class App{public static void Main(string[] args){LogFactory factory = new EventFactory();
Log log = factory.Create();
log.Write();}
}
![Page 55: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/55.jpg)
Public interface Moveable{ public void run(); }
Public class Plane implements Moveable{@Overridepublic void run(){…};}
Public class Car implements Moveable{@Overridepublic void run(){…};}
Public abstract class VehicleFactory{abstract Moveable create();}Public class PlaneFactory extends VehicleFactory{public Moveable create(){return new Plane();} }Public class CarFactory extends VehicleFactory{public Moveable create(){return new Car();} }
Public class Test{public static void main(String[] args){
VehicleFactory f=new PlaneFactory(); // the only change happens here!Moveable m= factory.create();m.run();}
}
Example: customize vehicle types and its production
![Page 56: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/56.jpg)
Abstract Factory Methodprovides a way to encapsulate a group of individual factories that have a common theme without specifying their concrete classes.
change windows theme,
then buttons, tasks,
menus, tools, all changed
accordingly.
![Page 57: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/57.jpg)
Structure
Abstract Factory: declare the interface to create abstract product
ConcreteFactory: implements CreateProduct()
Abstract Product: declare ONE interface for a group of product
ConcreteProduct: define how to create a product by a factory
![Page 58: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/58.jpg)
Example: a series of product replacementpublic class Car extends Vehicle{}public class AK47 extends Weapon{}public class Apple extends Food{public Void printName(return…);}
public abstract class Vehicle{public abstract void run();}public abstract class Weapon{public abstract void shoot();}public abstract class Food{public abstract void printName();}
public abstract class AbstractFactory{public abstract Vehicle createVehicle();public abstract Weapon createWeapon();public abstract Food createFood();
}
public class DefaultFactory extends AbstractFactory{public Vehicle createVehicle(){return new Car();}public Weapon createWeapon(){return new AK47();};public Food createFood(){return new Apple();};
}
public class MagicFactory extends AbstractFactory{public Vehicle createVehicle(){return new Broom();}public Weapon createWeapon(){return new MagicStick();};public Food createFood(){return new Mushroom();};
}
public class Test{
AbstactFactory f=new DefaultFactory();// only changes here to MagicFactory();Vehicle v=f.createVehicle();c.run();Weapon w=f.createWeapon();w.shoot();Food a = f.createFood();a.printName();}
![Page 59: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/59.jpg)
Three styles: elegant, practical and lazy
Three positions to place plants: flower bed, corner and
garden center
Example: Design a Garden
style/position Flower bed corner Garden center
elegant tulips Banyan Bluegrass
Practical Grapes Pomegranate Loofah
Lazy Rose Camellia bamboo
![Page 60: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/60.jpg)
Difference between Factory Method and Abstract Factory Method
![Page 61: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/61.jpg)
Builder Pattern
![Page 62: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/62.jpg)
Director: construct an object to use the Builder interface
Builder: declare an abstract interface to construct a Product
ConcreteBuilder: implement Builder interface to construct the product
Product: the complex object to be constructed
Structure
![Page 63: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/63.jpg)
Difference from Abstract Factory
Builder focuses on constructing a complex object step by step.
Abstract Factory emphasizes a family of product objects (either simple or complex).
Abstract Factory is for a family of related products. The Builder is for one product.
If you have a new office, and only need new desks, you would use a Builder. A desk will always be a desk, but there are many different configurations for a desk, i.e., size, shape, presence of a hutch, drawers, etc.
If you have a new office, and the inside is completely bare, you would need various objects and would use an Abstract Factory that creates Furniture, from which our Desk descends. In this case, Desk as we know is a "complex" object, so it uses the Builder pattern, but here it is part of a directing Abstract Factory. The Abstract Factory would also create simple objects, like very specific lamps (StraightFunkyLamp), via a StraightFunkyLampFactory class.
![Page 64: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/64.jpg)
a house is composed of 5 parts
Floors
walls
windows
doors
ceilings
Construction steps are fixed, but concrete components (doors, windows) will change
use Builder pattern to separate the variants (doors, windows) from the invariants (construction process)
Example: Build a house in a computer game
![Page 65: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/65.jpg)
public abstract class House //abstract House class{ }
public abstract class Builder //variables{public abstract void BuildFloor();public abstract void BuildDoor();public abstract void BuildWindows();public abstract void BuildWall();public abstract void BuildHouseCeiling()
public abstract House GetHouse();}
public abstract class GameManager{public static House CreateHouse(Builder builder){builder.BuildFloor();builder.BuildDoor();builder.Buildwall();builder.BuildWindows();builder.BuildHouseCeiling();
return builder.GetHouse();}
}
public class RomanHouseBuilder : Builder{public override void BuildDoor() { }public override void BuildFloor() { }public override void BuildWindows() { }public override void BuildWall() { }public override void BuildHouseCeiling() { }public override House GetHouse() { }
}
class App{public static void main(){House house =GameManager.CreateHouse(new
RomanHouseBuilder());}
}
![Page 66: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/66.jpg)
Example: Vehicle manufacturing
![Page 67: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/67.jpg)
Prototype PatternWhen a client wants to create an object (product):
‐ Knows exactly which type (class), then use NEW‐ Only knows specific requirements, then use FACTORY method‐ Only knows that a similar object is needed, then use PROTOTYPE
![Page 68: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/68.jpg)
Structure
Client: send object creation request to prototype manager
Prototype: an abstract interface
ConcretePrototype: cloned object
PrototypeManager: create concrete product
![Page 69: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/69.jpg)
Palette: click any of the color return an instance of that color
Treat each color as an object, abstract to a super class
Example 1: Palette
![Page 70: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/70.jpg)
![Page 71: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/71.jpg)
![Page 72: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/72.jpg)
Singleton: ensure there is only one instance and provide
global access point
Factory: define an interface to create object, and let the
subclass to decide how to instantiate the concrete product
Abstract factory: define an interface, to create a family of
product
Builder: encapsulate the construction steps of a product
Prototype: to copy/clone from an existing object
Summary of Creational Design Patterns
![Page 73: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/73.jpg)
Composite Pattern
Decorator Pattern
Proxy Pattern
Flyweight Pattern
Façade Pattern
Bridge Pattern
Adapter Pattern
Structural Design Patterns
![Page 74: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/74.jpg)
Adaptor Pattern
Case: a team provides S service, but it does not have capable team members
Only A outside the team can do the job.
To recruit A into the team
A does not want to join the team, arrange B to finish the job while let A teach B how to do it.
Now, B is a composite entity (providing service, inherited/learn from A)
Convert an interface from a class to another expected interface
Adaptor pattern allows two classes without compatible interface to work together
![Page 75: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/75.jpg)
How to use it?
Client initializes the request through targeted interface
method
Adaptor uses the Adaptee’s interface to convert the request
to the desired interface
Client receives the result, however does not how what
happened at all.
![Page 76: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/76.jpg)
Aim and Feasibility
Aim: to convert an interface to the user desired another interface, so that to allow two separate interfaces can seamlessly work together
Where to use:
To use an existing class, but its interface is not usable
Create a reusable class that it can work with other class (potentially with different interfaces
To use existing subclasses, but cannot match their interfaces through inheritance. Object adaptor is then used to adapt its superclass interface
Two types: Class Adaptor and Object Adaptor
![Page 77: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/77.jpg)
Structure
Use a specific Adapter class to match the Adaptee and Target classes.Adapter class multi‐inherits from Adaptee and Target classesAdapter can overwrite Adaptee’s methods, since Adapter implements it
![Page 78: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/78.jpg)
Example:
//Target: define the interface (and method) that Client will usepublic interface Target { void request(); }
//Adaptee: the existing interface public class Adaptee{ public void specificRequest(){} }
//Adapter: extends Adaptee and implement Target interface public class Adapter extends Adaptee implements Target { public void request() {
super. specificRequest();}
}
![Page 79: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/79.jpg)
Object Adaptor
Allow one Adapter to talk with multiple AdapteesAdaptee itself and all inherited subclasses can work togetherAdapter can add method to all Adaptees
![Page 80: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/80.jpg)
Example: Object Adaptor//Target: define the interface that client will use public interface Target { void request(); }
//Adaptee: the existing interface public class Adaptee { public void specificRequest(){} }
//Adapter: to match the Adaptee’s interface with Target’s interface public class Adapter implements Target { public Adapter(Adaptee adaptee) { super(); this.adaptee = adaptee; } public void request(){ adaptee.specificRequest(); } private Adaptee adaptee;
}
![Page 81: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/81.jpg)
Pros and Cons
Pros:
Very convenient for designers to freely design interfaces,
don’t need to worry about the adaptability
Cons
Static structure. Since only single inheritance is allowed,
cannot use in the case where multiple Adaptees want to talk
with a single Target
![Page 82: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/82.jpg)
Template method PatternObserver PatternIterator PatternChain of Responsibility Pattern Memento Pattern Command PatternState Pattern Visitor PatternMediator Pattern Strategy PatternInterpreter Pattern
Behavior Patterns
![Page 83: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/83.jpg)
Strategy PatternMany algorithms may realize ONE functionality. Clients want to choose one of them under different contextsDifficult to maintain the class using an algorithm: especially many algos need to be supported, and each is very complexTo choose an algo upon different conditions; to support an algothat will not be used will cause performance problemTightly coupling between the algo implementation and the class using it, so very challenging to add one more algo
Solution: to separate the algo from the class using it and become an independent algo object, then to abstract the common feature as the interface, finally the class uses the composite algo interfaces
![Page 84: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/84.jpg)
Aim and Feasibility
Aim: to define a series of algos, encapsulate each, so that it is independent with the client’s changeWhere to use it?
Software construction stage: some object many use many methods, and frequently change, if hard code all these algos into the object implementations, it will become very complex, and sometimes an algo may not be used in the futureQuestion: how to transparently change an object’s method? How to decouple the method and object itself?
![Page 85: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/85.jpg)
Structure:
![Page 86: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/86.jpg)
Participants
StrategyDefine the common interface to be used by all strategiesContext uses this interface to call a specific ConcreteStrategy
ConcreteStrategyImplement the Strategy interface
![Page 87: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/87.jpg)
Consequence AnalysisPros:
Separate the algo and the class using it; client can select an algo at runtime, reusable code, easy to revise and maintainUse composition to replace inheritance: if to inherit a subclassdirectly from Context class, may also help, but this inheritancemakes tight coupling between subclass and super classStrategy pattern uses composition, de‐coupling the Context class the implemented StrategiesCompare with switch conditions, not hard code into a classClient can choose different algos from different context at runtime
![Page 88: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/88.jpg)
Cons:Client needs to know exactly what functionality each algo can provideCommunication cost between algos and Context: Context needs to pass different parameters to each algo class, thus Context class may create and pass some parameters never used by some algosIncrease the no. of class and objects: each algo becomes a class, thus challenging to maintain when large no. of algos exist
![Page 89: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/89.jpg)
![Page 90: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/90.jpg)
![Page 91: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/91.jpg)
![Page 92: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/92.jpg)
![Page 93: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/93.jpg)
Separate the variants from invariants
![Page 94: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/94.jpg)
Implement DUCK’s behaviors
![Page 95: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/95.jpg)
![Page 96: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/96.jpg)
Another Example: Diff Sort AlgosBelow is how strategy pattern helps encapsulate different sort algorithms for different objects, allowing clients to dynamically change respective algorithme.g., Quicksort, Shellsort, Mergesort
![Page 97: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/97.jpg)
Example: Book DiscountSome books have no discountSome books only have a flat rate discount $1Some books have an x% discount
![Page 98: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/98.jpg)
UI Designs1. What is UI?2. UI Design Models3. Design Principles 4. Golden Rule5. Visual Designs
![Page 99: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/99.jpg)
![Page 100: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/100.jpg)
![Page 101: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/101.jpg)
![Page 102: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/102.jpg)
![Page 103: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/103.jpg)
![Page 104: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/104.jpg)
![Page 105: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/105.jpg)
![Page 106: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/106.jpg)
![Page 107: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/107.jpg)
![Page 108: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/108.jpg)
![Page 109: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/109.jpg)
User friendly for anticipated users.
System users often judge a system by its interface rather than its functionality.
A poorly designed interface can cause a user to make catastrophic errors.
Poor user interface design is the reason why so many software systems are never used
Some Facts for UI ……
![Page 110: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/110.jpg)
To suggest some general design principles for user interface design
To explain different interaction styles and their use
To explain when to use graphical and textual information presentation
To explain the principal activities in the user interface designprocess
To introduce usability attributes and approaches to system evaluation
Objectives
![Page 111: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/111.jpg)
User familiarityThe interface should use terms and concepts which are drawn from the experience of the people who will make most use of the system
ConsistencyThe system should display an appropriate level of consistency. Commands and menus should have the same format, command punctuation should be similar, etc.
Minimal surpriseIf a command operates in a known way, the user should be able to predict the operation of comparable commands
Design principles of user interface
![Page 112: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/112.jpg)
RecoverabilityThe interface should include mechanisms to allow users to recover from errors. This might include an undo facility, confirmation of destructive actions, 'soft' deletes, etc.
User guidanceThe interface should provide meaningful feedback when errors occur and provide context‐sensitive user help facilities
User diversityInteraction facilities for different types of user should be supported. For example, some users have seeing difficulties and so larger text should be available
![Page 113: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/113.jpg)
![Page 114: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/114.jpg)
![Page 115: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/115.jpg)
![Page 116: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/116.jpg)
![Page 117: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/117.jpg)
![Page 118: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/118.jpg)
![Page 119: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/119.jpg)
![Page 120: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/120.jpg)
![Page 121: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/121.jpg)
Web 2.0Facilitate participatory information sharing, interoperability, user‐centered design and collaboration on the world wide web.User can provide the data that is on a web 2.0 and exercise some control over that data.e.g.: social networking sites, video sharing sites, Wikis, (micro‐)blogs, etc.
![Page 122: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/122.jpg)
![Page 123: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/123.jpg)
![Page 124: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/124.jpg)
![Page 125: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/125.jpg)
Web 3.0
![Page 126: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/126.jpg)
126
http://www.creativefolks.net/
![Page 127: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/127.jpg)
127
http://www.moma.org/exhibitions/2004/tallbuildings/index_f.html
![Page 128: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/128.jpg)
128
http://w
ww.bh9
9.com/
![Page 129: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/129.jpg)
129
http://www.armani.com/ga_menu/EN/home.html
![Page 130: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/130.jpg)
130
TEXTsMost of the information are conveyed through texts, especially websites.
Careful layout and creational designs can make the website stand out from the peers
Combine texts with FLASH, to embed the texts in the small videos can help a lot.
Besides main texts, website navigator, headings etc. are all composed of texts
![Page 131: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/131.jpg)
131
http://www.gardens‐co.com/v1/
![Page 132: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/132.jpg)
132
http://jonesingfor.com/#/HOME/
![Page 133: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/133.jpg)
133
Font design for businesses is very challenging, that eventually serve as part of the overall business.
In UI design, there is no need \to have the designer be professional in font design, but he/she needs to know how to use them.
![Page 134: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/134.jpg)
134
Logo and Slogans http://www.androians.com/vegas/
![Page 135: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/135.jpg)
135
In general, maximum THREE types of fonts are used in a webpage. If more types of fonts have to be used, try to use those belong to a category.
![Page 136: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/136.jpg)
136
Besides, we can use Color contrast, size contrast, and density contrastto increase the beauty of the layout
On the same page, texts need to be consistent
![Page 137: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/137.jpg)
137
![Page 138: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/138.jpg)
138
![Page 139: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/139.jpg)
139
Image is more intuitive than the texts, also the core elements of UI design, the majority of visual works mostly have excellent graphic design and images
IMAGEs
Through the use of good graphics or pictures, closely seize the viewer's eye.
A good image is worth a thousand words!
![Page 140: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/140.jpg)
140http://www.8yu.com/
![Page 141: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/141.jpg)
141http://www.8yu.com/
![Page 142: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/142.jpg)
142http://www.8yu.com/
![Page 143: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/143.jpg)
143http://www.8yu.com/
![Page 144: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/144.jpg)
144http://www.8yu.com/
![Page 145: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/145.jpg)
145http://www.8yu.com/
![Page 146: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/146.jpg)
146http://www.8yu.com/
![Page 147: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/147.jpg)
147http://www.8yu.com/
![Page 148: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/148.jpg)
148http://www.8yu.com/
![Page 149: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/149.jpg)
149
However, we cannot only emphasize the importance of visual aesthetics, and only beautiful graphics or pictures, but ignoring the core objectives of a website
‐ efficient and accurate information delivery
the customer will not be satified.
![Page 150: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/150.jpg)
150
DRAFT
![Page 151: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/151.jpg)
151
FINAL
![Page 152: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/152.jpg)
152
![Page 153: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/153.jpg)
To design the website, we must be very clear WHY:
who are the target users? What can they get from the website?What do we have as a return from the website, or biz model?
Even with similar objectives, the specific design will also be based on the customer's different requirements
product sales or business services?
Design Goal and Strategy
![Page 154: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/154.jpg)
WICKED SUNGLASSES is a special e‐commerce website to sell sunglasses from a variety of different brands
![Page 155: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/155.jpg)
Also to sell sunglasses, BLINDE only has 5 products, all coming from The Matrix 2
![Page 156: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/156.jpg)
What about to SWAP the website designs for WIKED SUNGLASSES and BLINDE?
![Page 157: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/157.jpg)
To make sure what is the goal of the design, is primarily to find the clients’ advantages, features, and business models.
Sometimes, clients are not sure about what materials to provide, in this case designers can ask the following questions.
![Page 158: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/158.jpg)
Question 1: what is your goal to build the website?
Possible answers:
Advertisement for our provided servicesE‐commerce, sales
For cultures and ideasTo establish a platform for suppliers and customersTo provide public services
*multiple choices* are possible
![Page 159: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/159.jpg)
LENOVO’s website is to primarily describe the products, but also support e‐commerce, and to promote its brand
![Page 160: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/160.jpg)
blood
![Page 161: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/161.jpg)
Blood knowledge
![Page 162: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/162.jpg)
Question 2: what is the scale of your website?
Possible answers:
very small, to just place the materials we have now, unlikely to add new stuff futureStart from small, then may grow bigger, and finally has very rich contents
Very complicates, many columns
Rich resources, rapid updates and grow
Not quite sure at this point, will see
![Page 163: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/163.jpg)
The size of the website will determine the design structure
If the website will experience rapid updates and grow, design has to reserve space for the future and with flexible structures
For example, vertical columns may help if many contents
![Page 164: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/164.jpg)
An example from LENOVO: vertical columns for its rich products
http://www.ray-ban.com/China/
![Page 165: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/165.jpg)
A glass brand: RAY‐BAN (easy to add new products)
http://www.ray-ban.com/China/
![Page 166: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/166.jpg)
Question 3: what are the common features of the users?
Possible answers:
Distributors and end‐users。
Youth from 15‐30
Monthly income higher than 5000 RMB or white collarsArt students or fans
Male or female?
Foreigners only
![Page 167: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/167.jpg)
![Page 168: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/168.jpg)
![Page 169: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/169.jpg)
Question 4: what is the business model?
Possible answers:
website itself will not make money, if clients are interested, they will order in another channel
advertisement and online gaming
users can pay directly online
we sell “information”, e.g., VIP members can have more information than normal usersno income, just for fun
This question is to help designers to understand the expectationof the clients on this website, and in turn to change the design for this purpose
![Page 170: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/170.jpg)
Question 5: How about the used technologies?
Possible answers:
full FLASH, fancy
full HTML will be sufficient
welcome page in FLASH, then static inside or some small flash
3D 360 degrees, product show, FLASH for product descriptionspartly in PHP/ASP
![Page 171: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/171.jpg)
Toyota AYGOD with 360 degrees show
http://www.toyota-europe.com/cars/new_cars/aygo/index.aspx
![Page 172: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/172.jpg)
What is inside Nike “23”?
http://www.nike.com/jumpman23/xx3/cnCN/
![Page 173: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/173.jpg)
Question 6: what about design style?
Possible answers:
modern
professional, rich content, not that fancy
Lively, bright colors, like fruit sugar ...
I don’t like blue, just NO blue pls
shining, I want it to be out of ppl’s imagination!
![Page 174: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/174.jpg)
http://www.tsred.com/
Target Users
![Page 175: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/175.jpg)
![Page 176: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/176.jpg)
![Page 177: Advanced Software Engineeringwang-xb/wireless_new/course... · Data warehouse situates at the centre of the architecture, other ... Multiprocessor Architecture ... Clients and servers](https://reader033.fdocuments.us/reader033/viewer/2022042807/5f7e662a547c7227b123c5ff/html5/thumbnails/177.jpg)
Thailand Travel from Japan http://www.thailandtravel.or.jp/studytour/