You are on page 1of 7

This DZone Refcard brought to you by...

Design tools for


Silverlight, .NET, and the Web
Whether you’re designing standards-based Web sites, rich desktop experiences,
or mobile applications, Microsoft® Expression® Studio 4 Ultimate provides you
with a family of professional design tools to use for Silverlight®, .NET, and the
Web including:

• Microsoft® Expression® Web with SuperPreview—Web Design


• Microsoft® Expression Blend® 4—Interactive Design
• SketchFlow—Prototyping
• Microsoft® Expression® Encoder 4 Pro—Rich Media Delivery
• Microsoft® Expression® Design 4—Graphic Design

“By taking advantage of Microsoft


Expression Blend, our designers and
Visit www.microsoft.com/expression to try
developers can work much more
closely together to create great Expression Studio 4 Ultimate today!
user experiences.”
Michael Hayes, VP, Engineering,
On Demand Blockbuster

“To successfully compete, we need


to ‘wow’ users instead of delivering
the same information as everyone
else—and Microsoft software helps
us to do that.”
J. Lennox Scott, Chairman and CEO,
John L. Scott Real Estate

“What would normally take me


upwards of 10 minutes; I can now do
in under a minute [using Microsoft
Expression Blend].”
Jose Fajardo, Senior Software Consultant,
Cynergy Systems

Visit http://refcardz.dzone.com to browse and download all your favorite Refcardz


brought to you by...
#114
Get More Refcardz! Visit refcardz.com

Application Prototyping
CONTENTS INCLUDE:
n
Why Prototype?
n
What is Prototyping?

with SketchFlow
n
Guidelines and Principles
n
Real World Scenario
n
About SketchFlow
SketchFlow Basics and more...
By Parvez Ansari
n

WHY PROTOTYPE? Prototyping is an important component of


Hot application development; if the client’s requirements
Application Development Tip are not properly interpreted, you risk wasting time
Software applications are an important part of our lives. They and money.
help businesses and non-business organizations work more Let us now see how to prototype an application.
efficiently. Developing an application involves different stages
that help shape the application according to client needs.
GUIDELINES AND PRINCIPLES
Prototyping
Just as the foundation of a building is important for its
Basic steps to follow for prototyping the application:
stability, the prototyping phase is a critical part of application
• Understanding Requirements
development. This Refcard aims to cover the core aspects of • Documenting the Process
application prototyping. • Technical Feasibility
• Quick Experimentation with Different Ideas
• Client Feedback
We will also look at how SketchFlow can help us prototype • Incorporation of Feedback
more quickly and efficiently.
Understanding Requirements
www.dzone.com

When your client comes to you with a problem and tells


WHAT IS PROTOTYPING?
you what their needs are, it is important that you understand
the core requirements so that your end result is what the
Prototyping helps us create the UI structure of an application
client wants.
without actually writing any code. Problems can be foreseen
before they arise, even prior to writing the actual business Documenting the Process
logic. Prototyping should not be confused with the This is an essential part of developing the prototype. You need
development of a pilot version of the application. to note down requirements so that you can later measure
the prototype’s success. The client’s feedback from the
What does prototyping require? In a real world situation, the
prototype’s review should also be recorded so that you can
client needs to solve a problem. Before you start building
understand why a certain feature was included or removed
the solution it is important to first evaluate the problem to
from the prototype. This reduces the chance of having a
understand exactly what the client needs.
misunderstanding between the client and the developer team.
The basic goal of application prototyping is to Technical Feasibility
Hot understand the client’s needs clearly and get their The client might require a bunch of features that may not
Tip approval before proceeding with the main application. be viable to implement on the target computers. So, the
Application prototyping with SketchFlow

It reduces the hassles and costs that might arise while


working on the application directly without understanding the
requirements.

One platform,
many opportunities
to create engaging, interactive applications
for the Web, desktop, and mobile devices.

 
www.microsoft.com/silverlight M
Prototyping Flow

DZone, Inc. | www.dzone.com


2
Application Prototyping with SketchFlow

prototype will help judge the technical feasibility of developing Components Involved
the application. The second step is to identify the components of the current
manual system. In this situation these components are:
If a required feature is creating a problem in the prototyping • User Access Rights to different components
stage, it is possible that it might be a bigger roadblock during • Purchase Order (PO) raising and processing
the actual application development. Thus, prototyping helps the • Consent Application handling

team assess this risk and find an alternate method if necessary. Login
Vulnerable feature requirements should be tackled first To ensure authorized access by employees, it is decided to
because, if overlooked, they may hinder the project during create users based on the roles assigned to them in the office.
actual development. Facing difficulties during prototyping Proper access privileges are given to users to grant/deny
makes the actual development process smoother. access to a particular component of the system.
Messaging System
Brainstorming
The messaging system is the core component of the whole
Brainstorming helps the team classify the core components
system. A placed purchase order or an application that has
of the project and facilitates the identification of different
been submitted for consent is shown on the respective
approaches that can be evaluated to find the most efficient way
approving authorities screen. The messaging system also
for interaction between components.
manages the approval/denial of the request.
Quickly Experiment with Different Ideas To ensure decisions are made in a timely manner, a timer that
Prototyping helps us quickly explore how an application should is placed in the messaging system displays the message as
function. Different methods can be experimented with to see soon as the employee logs an application.
how to attain results in the most efficient manner. The main
focus is not to work on the business logic, but on the UI and The message is displayed in the appropriate employee’s
the flow between core components. It helps the team identify message box for them to take necessary action.
a better solution in a limited amount of time. It should be done Flow Between the components
quickly and the focus should remain on the core requirements. It is essential to maintain logical flow between the
components. To place a purchase order, the flow should be
Client Feedback
from the main screen to the Purchase Order form and then to
Client feedback helps the team polish the prototype and
the messaging system for approval.
stay focused on the core components. Since feedback is
implemented in the initial stages, time is saved. Based on the requirements placed by the client and from the
current manual system, the development team decides to
Improve the Prototype Based on Feedback create a SketchFlow WPF application.
Feedback from the client should be incorporated in the
prototype. This will help the client identify whether it meets Client Feedback
their requirements. The technical team can check to see if it Once the prototype is ready, the SketchFlow project is
feasible to implement particular aspects of the feedback. packaged and sent to the client for feedback. The client views
the prototype in the SketchFlow player and gives feedback
Prototype Should be very close to the Real Application using the “My Feedback” feature of SketchFlow, which is
Care must be taken to ensure that the prototype remains then exported to be sent to the development team. This is
close to what the actual application will be when developed. A then imported into the prototype project so the feedback
feature that can not be implemented in the actual application can be reviewed. Multiple people from the client’s team can
should not be included in the prototype. send different feedback files that all need to be viewed by the
development team.
Communication
Just like documentation, communication between the client Incorporate Feedback
and the developer team is an important factor for the success The next step is to incorporate the feedback into the
of the final application. Communication reduces the risk of a prototype and then send the prototype back to the client for
misunderstanding occurring. further review. Several iterations of this can be carried out until
the client is satisfied.

REAL WORLD SCENARIO Approval of the Prototype


After the prototype is refined with all of the feedback, it has
To better understand the prototype guidelines discussed to be approved by the client before the actual development
above, let’s consider a real world situation. In the last section can start.
of this Refcard we will see how this real world situation is
implemented using SketchFlow. ABOUT SKETCHFLOW

Understanding Requirements
SketchFlow is a great tool from Microsoft It is part of
Your client approaches you for the automation of the current
Expression Studio 4 Ultimate and gives us the capability to
manual office system they have in place. The development
quickly and effectively map out and iterate through the flow of
team should note down the requirements so that they can
an application’s UI.
be used to monitor whether the prototype has met the
requirements once it is completed. Expression Blend is the production tool for WPF & Silverlight,

DZone, Inc. | www.dzone.com


3
Application Prototyping with SketchFlow

whereas SketchFlow is a prototyping tool built on top of Artboard shows us the content of the individual screens of our
Expression Blend. Since it is built on Blend, all of the Blend prototype. This is the visual part of the application where you
features are available. This makes our transition from prototype can use the full range of controls available in Expression Blend.
to production much easier. You can draw by using the drawing tools. You can also import
images from Adobe Photoshop, which is especially useful if
SketchFlow enables us to quickly present our ideas on how the
the client has a visual mockup of the application he would like
UI flows and how the screens will look. This enables the client
to use.
to focus on the functionality rather than the specific details of
the design. SketchFlow Map appears at the bottom of the Expression
Blend application when working in SketchFlow. It is where the
Since SketchFlow prototypes are real WPF or Silverlight
whole flow of the application is created. It allows us to define
projects, the prototype or an individual element of the
the way each screen interacts with the other screens.
prototype can be reused or used as a resource library.
In the below figure you can see that the flow of the application
You can download the 60-Day Free Trial version of Expression
is from Screen1 to Screen2. So, it can be determinted that
Studio 4 Ultimate at
Screen1 is the startup screen.
http://www.microsoft.com/expression/try-it/Default.aspx

SKETCHFLOW BASICS

Now we will see how to create a SketchFlow application.

Create a Project  

Once you start Expression Blend you see the following startup SketchFlow Map

screen. Click on “New Project” to begin. are an important part of the prototype because they are the
visual element visible to the user. Each screen is shown as a
You get the following screen and have the option to select the
node in the SketchFlow Map.
project type as Silverlight or WPF. Selecting the project type
depends on what kind of requirement the client has, whether There are two types of screens/nodes:
the application would be a standalone application or whether it • Normal screens
• Components screens
has to be deployed on the web.
Normal screens are generally used to navigate to and from.
In our case our client requires a Desktop application, so we will
The component screen is what can be reused in multiple
select WPF SketchFlow Application. Provide a suitable project
screens, for example a menu component created by the design
name and click on Ok.
team can be reused on multiple screens as required.

When you hover over the node in the SketchFlow Map panel
a visual menu appears, as shown below. You can also see the
XAML file name of the screen in the tooltip

 
Expression Blend, New Project Screen  
Screen Node
You will get the following screen:
To create a new screen click on the Create a screen
Hot
Tip menu in the SketchFlow Map toolbar of the node
selected
If you want to connect to the existing screen, hover on the
selected node and from the visual menu select the “Connect
an existing screen” icon . Start dragging to create a new
navigation connection. An arrow will appear following the
mouse pointer. This arrow has to be dragged to the screen
where you want to make the connection.

Hot To remove the flow map connection right click the


Tip connection and click remove.

  Projects Panel allows us to view, edit, and manage all files


Expression Blend SketchFlow Workspace associated with the open project.

If you are familiar with Expression Blend, you will find it Objects and Timeline panel shows the hierarchical view of the
similar.You get two views of your design: Artboard and contents on the screen. It allows us to select objects and move
SketchFlow Map. them around as required.

DZone, Inc. | www.dzone.com


4
Application Prototyping with SketchFlow

Layers can be further added to organize the objects on the Open the Assets Panel Ctrl + Period
artboard. When you create a storyboard a red circle indicates
Toggle between Design, Split View and Code View F11
that recording is on. You can select the storyboard from the
Storyboard Picker. Build the Project Ctrl+Shift+B

The image below (a) indicates the Record Indicator, (b) indicates Run the Project F5
the Storyboard Picker and (c) represents playback controls.

USING SKETCHFLOW TO PROTOTYPE

SketchFlow is a great tool for prototyping the application.


We have already seen the components of the SketchFlow
Application and how to create a new project. We will now start
to prototype the application.

Start a new SketchFlow WPF project. By default SketchFlow


  starts with many panels open. We may not be using all of these
Objects and Timeline Panel panels so it is recommended to keep only the following panels
open: Artboard, SketchFlowMap Panel, Properties Panel,
Properties Panel is an important UI part of SketchFlow that you
Projects Panel, States Panel.
will use often. It shows the properties of the currently selected
item on the artboard. Properties like Background, Name etc. If you require other panels later you can always open them
can be changed for a particular component of the application. using the Windows Menu.

If an object is modified in the artboard directly using object If you get to a point where you have made mistakes
handles, the property changes will be reflected in the on all of the open panels and are confused, you
properties panel. The sections of the properties panel are Hot can always revert back to the SketchFlow’s default
collapsible. Tip workspace by pressing Ctrl+Shift+R or by selecting
Important sections of the properties panel are (these may “Reset Current Workspace” from the Windows Menu.
vary according to the object on the artboard selected):
Brushes, Appearance, Layout, Common Properties, Transform, Creating Screens
Miscellaneous. In the SketchFlow Map Pane you will see a node named
Screen1. Right click on it and rename it as “Welcome Screen.”
There might be confusion on what is the most
Double click on the Welcome Screen node, this will select the
effective way to change the property of an object on
Welcome screen page in the artboard and allow you to draw
the artboard or in the properties panel. It depends
the contents you want in the welcome screen.
on the requirement. If you wish to fit in an object on
Hot the artboard it would be better if you use the object
Tip handle and mouse to arrange it on the artboard.
If you want a specific height and width of a control
you can do it by selecting the object on the artboard
and modifying the properties in the properties panel.
 

The changes you make in the object properties are registered Hover over the welcome screen node and click on the “Create
in the form of XAML code for example if you change the height a connected screen” node. This will create a new node, name
and width of the Rectangle to 100 and 200 respectively, the it “Login”. Double click on login to select the “Login Screen”.
XAML code will look like this: Select the “Objects and Timeline Panel” and click on
<Rectangle x:Name=”rectangle” Fill=”#FFF4F4F5”
the root component, in this case it is UserControl named
HorizontalAlignment=”Left” Height=”200” Margin=”74,93,0,0” “Login_Name”. In the properties panel enter Height and
Stroke=”Black” VerticalAlignment=”Top” Width=”100”/>
Width as 300 px. This will resize the Login Panel.
Other properties are set by Blend itself based on the object
From the left side tools panel click on the Assets button it
placement you made like VerticalAligment and Margin.
will open the following panel

USEFUL KEYBOARD SHORTCUTS

The following shortcut keys are the most frequently used keys
in Expression Blend.

Show/Hide SketchFlow Map Shift + F12

Hide/Show all panels Tab, F4

Make into Component Screen Shift + F8  


Assets Popup

DZone, Inc. | www.dzone.com


5
Application Prototyping with SketchFlow

From under the Sketch Styles select TextBox Sketch to draw


the TextBox. The Login Screen will look like this.

Login Screen

Just as we created the Login Node from the Welcome Node,  


Consent Application Form
create the “Main Screen” node from the Login Node. Double
click on the new node to select the screen.

From the “Main Screen” node create three more screen nodes
and name them: Consent Application Form, Purchase Order
Form, Help, Messaging System.

Now, the basic structure for our prototype is ready.

A navigation menu has to be created which will allow us to


move around the screens.
 
Double click on the “Main Screen” node to select it. On the Purchase Order Form
artboard create a rectangle and three buttons as shown below:

 
Navigation Component Screen

In the Objects & Timeline panel select the three buttons and
rectangle that we have created, right click on the selection and
click on the “Make Into Component Screen” option as shown
below.

Enter the name of the new Component Screen as “Menu”,  


Main Screen
Blend will create a separate screen with the items you had
selected. On the SketchFlow map, the Component Screen Creating Flow Between the Components
node is shown in green. Select the welcome screen. In the Objects & Timeline Panel,
right click on the root element “Layout Root” and under the
When you hover over the component node in SketchFlow option “Navigate to” select “Login Screen”.
Map you get a similar menu as the normal screen node. This
component screen we just created is to be shown in the Select the Login Screen and create a navigation Link on the
consent Application, Purchase Order & Help screen. “Login“ button to the “Main Screen”. Similarly navigation flow
can be created for all the remaining screens.
Drag the green component screen node over the consent form
to link it. Once the link is established, the menu element will Under the “Project Panel” double click and select the
be visible on the consent form screen. Similarly, drag the green Component Screen “Menu”, Right click on the “Consent
node over the PO and Help nodes. Application” Button to go to the Consent Application Form,
similarly click on the PO Button and the Help button to go to
The messaging system will pass on the approval or denial of respective screens.
the request to the main screen of the user. So, a flow from
the messaging system to the Main screen has to be created.
From the messaging system menu drag the option “connect an Hot Since the Menu is a Component Screen the navigation
existing screen” to the main screen.
Tip flow will apply in the screens where it is used.

The navigation of the “Submit” button in the Consent & PO


Screens is linked to the Messaging Form and the “Cancel”
button is linked to the Main Screen.
Sending the Prototype for Feedback
  After the completion of the Prototype, we send it to the client
SketchFlow Map for his comments. Under the File Menu click on the “Package
Creating Contents in the Screens SketchFlow Project” option. Enter the Folder location where
Create content in the MainScreen, Consent Application, PO, you want the package to be exported. The packaged project is
Help and Messaging System. The dummy content on each sent to the client for review.
screen gives the client a rough idea of how the application When the client executes the application sent to them they see
will look. the “SketchFlow Player”

DZone, Inc. | www.dzone.com


6
Application Prototyping with SketchFlow

Once the developer team receives the feedback file, it can


be loaded into the prototype project. Open the “SketchFlow
Feedback Panel”. If it is not open click on the “SketchFlow
Feedback” option under the “Windows” Menu.

Click on the Add button to load the feedback file sent by the
client. Once the feedback file is loaded you can see the details
in the Panel.
 
SketchFlow Player

The player allows the client to navigate through the application.


They can provide their response using the feedback panel. The
ink feedback allows drawing over the screen, and respective
text feedback can be typed in the feedback panel. To send  
feedback, click on “Feedback Options Button” . SketchFlowMap will show a small yellow bulb over the node on
From the opened menu select “Export which the feedback is given
Feedback”. It will ask for the Author
information and location to save the  
feedback file to. Save the feedback file Node with Feedback
(client will send this file to developer team). The developer team can watch the ink input by clicking on the
eye icon in the SketchFlow Feedback Panel.
 
Reviewing the feedback Multiple feedbacks from different members of Client Team can
be loaded together.

The developer team incorporates the feedback from the


design team and sends a new export of the SketchFlow player.
Client reviews the new build. Once this iteration is complete
  the developer team is ready to start work on the Pilot Project.

ABOUT THE AUTHOR RECOMMENDED BOOKS


Parvez Ansari is the Chief Architect of Nukeation (www. This book is for designers, user experience pros, creative
nukeation.com) a leading UX studio. He has been working directors, developers, or anyone who wants to create
on WPF since before its public release. He is part of the rich, interactive, and compelling products. If you want
Reuxables Team who are worldwide pioneers in XAML to communicate innovative ideas, research, experiment,
themes and have been responsible for the official Microsoft and prototype in the language of the interface, Dynamic
Themes for WPF and Silverlight. Prototyping with SketchFlow in Expression Blend is the
perfect text. Learn how to sketch, iterate, and validate ideas–
utilizing the power and productivity within SketchFlow.

BUY NOW
books.dzone.com/books/dynamic-prototyping

#82

Browse our collection of over 100 Free Cheat Sheets


Get More Refcardz! Visit refcardz.com

CONTENTS INCLUDE:


About Cloud Computing
Usage Scenarios Getting Started with

Aldon Cloud#64Computing

Underlying Concepts
Cost
by...

Upcoming Refcardz
youTechnologies ®

Data
t toTier
brough Comply.
borate.
Platform Management and more...

Chan
ge. Colla By Daniel Rubio

tion:
dz. com

also minimizes the need to make design changes to support


CON

tegra ternvasll
ABOUT CLOUD COMPUTING one time events. TEN TS
INC ■
HTML LUD E:

us Ind Anti-PPaat
Basics
Automated growthHTM
ref car

Web applications have always been deployed on servers & scalable


L vs XHT technologies

nuorn

Valid
ation one time events, cloud ML
connected to what is now deemed the ‘cloud’. Having the capability to support

Network Security
Usef
Du
ti

ul M.
computing platforms alsoulfacilitate
#84
Open the gradual growth curves

n an
Page Source

o

s
Vis it

However, the demands and technology used on such servers Structure

C
faced by web applications. Tools

Core
By Key ■
Elem

Patte
has changed substantially in recent years, especially with Structur
E: al Elem ents
INC LUD gration the entrance of service providers like Amazon, Google and Large scale growth scenarios involvingents
specialized
NTS and mor equipment
rdz !

ous Inte Change

HTML
CO NTE Microsoft. es e... away by
(e.g. load balancers and clusters) are all but abstracted
Continu at Every e chang
m

About ns to isolat
relying on a cloud computing platform’s technology.
Software i-patter
space

Hadoop
rdz .co


n
Re fca

e Work
Build
riptio
and Ant
Desc
These companies have a Privat
are in long deployed
trol repos
itory
webmana applications
ge HTM
L BAS

Patterns Control lop softw n-con to



that adapt and scale
Deve
les toto large user
a versio ing and making them
bases, In addition, several cloud computing ICSplatforms support data
ment ize merg
rn
Version e... Patte it all fi minim le HTM
Manage s and mor e Work knowledgeable in amany ine to
mainl aspects related tos multip
cloud computing. tier technologies that Lexceed the precedent set by Relational
space Comm and XHT

ref ca

Build
re

Privat lop on that utilize HTML MLReduce,


Practice Database Systems (RDBMS): is usedMap are web service APIs,

Deve code lines a system
d as thescalethe By An
sitory of work prog foundati
Ge t Mo

Buil Repo
This Refcard active
will introduce are within
to you to cloud riente computing, with an
d units
RATION etc. Some platforms ram support large grapRDBMS deployments.

The src
dy Ha
softw
e ine loping and Java s written in hical on of
INTEG attribute
task-o it all
softwar emphasis onDeve es by
Mainl these
ines providers, so youComm can better understand
also rece JavaScri user interfac web develop and the rris
Vis it

UML
codel chang desc
INUOU ding Task Level as the
e code
www.dzone.com

NT of buil trol what it is a cloudnize


line Policy sourc es as aplatform
computing can offer your ut web output ive data pt. Server-s e in clien ment. the ima alt attribute ribes whe
T CO cess ion con Code Orga it chang e witho likew mec ide lang t-side ge is describe re the ima
ABOU the pro ject’s vers applications. and subm with uniqu
e name
are from
sourc CLOUD COMPUTING ise hanism. fromAND
PLATFORMS web unavaila
was onc use HTML The eme pages and uages like ge file
it
(CI) is Nested s alte
rd z!

a pro evel Comm the build softw um ble. rnate can be


gration ed to Task-L Label ies to
build minim UNDERLYING CONCEPTS e and XHT rging use HTM PHP tags text that
blem activit the bare standard a very loos Tags found,
ous Inte committ to a pro USAGE SCENARIOS ate all
Autom configurat
ion cies to t
ization, ely-defi
ML as
thei
Ajax
tech L can is disp
Continu ry change cannot be (and freq
nden ymen layed
solution fective ned lang r visual eng nologies
Re fca

Label
Build
manu
al
d tool
depe deplo t need but as if
eve , a ) stalle the same nmen for stan overlap uen
(i.e. , inef Build t, use target enviro Amazon EC2: Industry standard it has
software and uagvirtualization ine. HTM , so <a>< tly are) nest
with terns problem ce pre-in whether dards
ated b></
ory. ns (i.e. Autom Redu ymen
has bec become e with a> is
via pat ticular d deploEAR) in each very little L

Subversion
reposit -patter s that Pay only cieswhat you consume
tagge or Amazon’s cloud
the curr you cho platform
computing isome
heavily based moron fine. b></ ed insid
lained ) and anti the par solution duce nden For each (e.g. WAR es t
ent stan ose to writ more e imp a></ e
not lega each othe
x” b> is
be exp text to “fi are al Depeapplication deployment
Web ge until t a
librarifew years agonmen
t enviro was similar that will softwaredard
industry standard and virtualization app
e HTM technology.
orta nt,
tterns to pro Minim packa nden
Mo re

CI can ticular con used can rity all depe all targe
s will L or XHT arent. Reg the HTM l, but r. Tags
etimes Anti-pa they
tend
es, but to most phone services:
y Integ alizeplans with le that
late fialloted resources, ts with an and XHT simplify all help ML, und ardless
L VS
XHTM <a><
in a par hes som
Centr
end,
Binar
pro cess. the practic enti ng incurred costgeme
nt
whether e a single
such
temp
resources on
were consumed
t enviro
nmen
orthenot. Virtualization MLaare your
othe
you prov
erst of L
b></
in muchallows physical piece of hardware to
ide be HTM
rily bad
Mana based
approac ed with the cial, but, implem anding
Creat targe es to actually r web
nden
cy rties are nt
of the a solid L has
into differe coding.resources
necessa pared to
chang
efi Depe prope itting utilized by multiple operating
function systems.simplerThis allows foundati job adm been arou
associat to be ben
er
Ge t

te builds commo
are not Fortuna
late Verifi e comm than on
n com Cloud computing asRun it’sremo
known etoday has changed this.
befor alitytohas irably, nd for
They they
etc.
Temp Build (e.g. bandwidth, n memory, CPU) be allocated exclusively to tely exp that som
lts whe
ually,
appear effects. Privat y, contin Every elem mov used
to be, HTML
ecte job e time
ed resu The various resourcesPerfo rm a
consumed by webperio applications
dicall (e.g. nt team
pag
individual operating entsinstances. ed to CSS
system Brow d. Earl
y HTM has expand . Whi
gration
opme because
adverse unintend d Builds sitory Build r to devel common e (HTML . ser ed far le it has don
ous Inte web dev manufacture L had very
Stage Repo
e bandwidth, memory, CPU) areIntegtallied
ration on a per-unit CI serve basis or XHT
produc tinu e Build rm an from
extensio .) All are more e its
e.com

ard ML shar limit


tern.
ack elopers rs add than
Con Refc Privat
from zero) by Perfo
(starting all majorated cloud ed man ed layout
feedb computing platforms. As a user of Amazon’s esse
term e, this
on
n. HTM EC2 cloud
ntiallycomputing es certplatform, you are result anybody
the pat
occur came
gration as based is
of the ” cycl such Build Send
autom as they builds proc
assigned esso
an operating L system
files shouin the plai
same wayain elem
as on allents
hosting The late a lack of stan up with clev y competi
supp
ous Inte tional use and test concepts
soon n text ort.
ration ors as ion with r
tinu
Integ entat
ld not in st web dar er wor ng stan
ven “build include
docum
Con be cr kar dar
the con s to the standar
oper
to rate devel
While efer of CI Gene
notion

DZone, Inc.
Cloud Computing

the
s on
expand

ISBN-13: 978-1-934238-75-2
140 Preston Executive Dr. ISBN-10: 1-934238-75-9
Suite 100
50795
Cary, NC 27513

DZone communities deliver over 6 million pages each month to 888.678.0399


919.678.0300
more than 3.3 million software developers, architects and decision
Refcardz Feedback Welcome
$7.95

makers. DZone offers something for everyone, including news,


refcardz@dzone.com
tutorials, cheat sheets, blogs, feature articles, source code and more. 9 781934 238752
Sponsorship Opportunities
“DZone is a developer’s dream,” says PC Magazine.
sales@dzone.com
Copyright © 2010 DZone, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, Version 1.0
photocopying, or otherwise, without prior written permission of the publisher.

You might also like