Internet For Business

ISYS 2110
Laboratory Notes
Please Note:
You should prepare for each lab session by pre-reading these lab
notes.
You should save your work either to the H Drive or to a USB. To be

safe you may want to save your work to both.
ISYS2110_Lab_Notes_V26.docx
Page 1
Table of Contents
Table of Contents ......................................................................... 2
1
Introduction ........................................................................ 4
1.1
Learning Objectives .......................................................................... 4
1.2
What you will learn and the basic ground rules! ................................... 4
1.3
IMPORTANT NOTE ............................................................................ 4
1.4
Lab Attendance ................................................................................ 4
1.4.1
Overall View of the Website Development Process .......................... 5
1.4.2
Tools Used in Laboratory Sessions ................................................ 5
1.4.3
Additional Resource Websites ....................................................... 5
1.5
Rules of Thumb ALWAYS follow these rules: ..................................... 6
1.5.1
HTML ........................................................................................ 6
1.5.2
VWD ......................................................................................... 6
1.5.3
General ..................................................................................... 6
Lab: Designing your Resume ................................................. 7

2.1
Learning Objectives .......................................................................... 7
2.2
Overview ........................................................................................ 7
2.3
Web development process................................................................. 7
2.4
Planning ......................................................................................... 7
2.4.1
Website Persona......................................................................... 7
2.4.2
Exercise: Goals and objectives ..................................................... 9
2.5
Information Architecture ................................................................. 10
2.5.1
Sitemap .................................................................................. 10
2.5.2
Exercise: Create a content outline .............................................. 10
2.5.3
Storyboard .............................................................................. 11
2.6
Design .......................................................................................... 11
2.6.1
Layout .................................................................................... 12
2.7
Conclusion .................................................................................... 15
2.8
Hints ............................................................................................ 15
2.9
References .................................................................................... 15
2.9.1
Planning and Design ................................................................. 15
Page 2
2.9.2
Storyboard .............................................................................. 15
2.9.3
Layout .................................................................................... 15
Lab: Building your Resume ................................................. 16

3.1
Learning Objectives ........................................................................ 16
3.2
Overview ...................................................................................... 16
3.3
Creating a Master Page ................................................................... 16
3.3.1
Inserting a Table ...................................................................... 16
3.3.2
Creating the banner .................................................................. 19
3.3.3
Adding a Site Map and Navigation .............................................. 20
3.3.4
HTML Navigation ...................................................................... 21
3.4
Creating the Pages ......................................................................... 22
3.5
Testing Quality Assurance ............................................................ 24
3.6
Deployment .................................................................................. 24
3.7
Hints ............................................................................................ 24
3.8
FAQ .............................................................................................. 25
Lab: HTML and CSS ........................................................... 26

4.1
Learning Objectives ........................................................................ 26
4.2
Overview ...................................................................................... 26
4.3
Constructing the page using HTML ................................................... 26
4.3.1
CSS ........................................................................................ 27
4.4
Hints ............................................................................................ 28
4.5
Quiz ............................................................................................. 28
4.6
Exercise: Macromedia Fireworks ...................................................... 28

Lab: Use-Case Analysis ...................................................... 29
5.1 Learning Objectives .......................................................................... 29

5.2 Role of use cases in system design ..................................................... 29
5.3 Key aspects of a use case diagram ...................................................... 29
5.4 Relationships in Use Case .................................................................. 31
5.5 Exercise........................................................................................... 34
5.6 Use-Case Scenario ............................................................................ 34
Page 3
Introduction
1.1 Learning Objectives
Understand the purpose of this document
Overview the tools to be used in the labs
Create a simple HTML site
Learn some fundamentals about Macromedia Fireworks
1.2 What you will learn and the basic ground rules!
You will learn four primary things in the laboratory sessions:
HTML 4.01 and XHTML 1.0 coding and techniques
Basic Graphic Design and Editing skills using Macromedia Fireworks.
Overall Website Development Process from a developers and businesss

standpoint
Visual Web Developer (VWD) to develop a simple ASP.NET websites
The purpose of these lab notes are to guide you through different exercises that
will build your proficiency in html (hyper text markup language) and xhtml
(extensible hyper text markup language) programming. You will also gain some
basic skills in graphic design and graphic editing. These skills and techniques will
be necessary for the VWD portion of the course and the final project.
These lab notes are, however, only part of your learning in the laboratory
sessions. You will also want to refer to Castros HTML Textbook (2003), and
other sources such as the links listed below for additional and more advanced
techniques.
1.3 IMPORTANT NOTE

The notes for each lab class should be read quickly before the lab session
to help you understand concepts and requirements during the lab itself.
1.4 Lab Attendance

You can miss attending a lab as long as:
1. You have completed the lab before the class
2. It is clearly your own individual piece of work. This might require you to
change the page in way, which does not just include design, it also includes
labels etc.
Page 4
1.4.1 Overall View of the Website Development Process

While you are performing the laboratory tasks and learning different
programming and graphic design techniques, keep in mind the bigger picture
which is the overall Website Development Lifecycle. A general overview of the
process is:
Planning
Information Architecture
Design
Implementation
Testing
Deployment
By the end of this course you will understand what a business should expect
during each phase of developing their website.
1.4.2 Tools Used in Laboratory Sessions

1.4.2.1
Visual Web Developer
The primary web development tool used almost exclusively in this course is
Microsoft Visual Web Developer (VWD). This is a very powerful tool that enables
users to build dynamic fully functional ASP.NET 2.0 Ecommerce web sites.
The HTML coding in the course will be performed in conjunction with VWD.
1.4.2.2
Macromedia Fireworks
For Graphics well be using Macromedia Fireworks. These are professional image
editing tools. Youll learn the basics!
1.4.3 Additional Resource Websites

HTML Resources
Textbook
Fireworks Resources
Website: http://www.cbtcafe.com/fire
http://www.cookwood.com/
html5ed/
works/
HTML Writers Guild:
http://www.joycejevans.com
/tutorials/Fireworks/fwtutori
als.htm/
http://www.hwg.org/resourc
es/html/
VWD Resources
http://msdn.microsoft.co
m/vstudio/express/vwd
http://msdn.microsoft.co
m/vstudio/express/vwd/
features/visuallydesign/
default.aspx
Page 5
HTML with Style:

http://www.webreference.co
m/html/
Xhtml:
http://www.w3schools.com/
xhtml/default.asp
http://www.dw-fwbeginners.com/tutorials/
http://www.asp.net/gets
tarted/default.aspx?tabid
=61
http://www.smartwebby.co
m/web_site_design/firework
s_tutorial.asp
1.5 Rules of Thumb ALWAYS follow these rules:

Dont worry if you dont understand all of these Rules of Thumb yet. You will!
1.5.1 HTML
When coding html tags, elements or attributes ALWAYS write in lowercase
When saving files (graphics or text/html files) for the website ALWAYS write in
lowercase
ALWAYS quote all attributes in an (x)html tag. For example, <body

background= pic.jpg> or <td width= 35>
Always insert closing tags </>. Even for open tags such as the <img> tag. In
this case you will insert a space then the /. For example: <img src=
picture.jpg alt= picture width= 50 height= 50 /> or <br /> \
1.5.2 VWD
Always store your database in the App_Data folder.
The main page of your websites must always be named default.aspx. This
enables anyone browsing to your directory to find the main page directly.
1.5.3 General
Make a backup of your files to avoid losing them
When performing a task ALWAYS think about which phase of the Website
Development Lifecycle the task falls within
Page 6
Lab: Designing your Resume
Describe the web site development lifecycle
Implement the planning, information architecture and design steps youre

your resume site
Design a layout and logo using Fireworks
2.2 Overview
This website will act as your online resume. You should aim to include content
about yourself that would be required by a prospective employer and this
information should be easy to find. You will also be required to link to all
your assessment submissions during the semester.
2.3 Web development process

The main steps in the process for developing a website are:
1. Planning
2. Information Architecture
3. Design
4. Implementation
5. Testing
6. Deployment
We will only be covering the first 3 steps in this lab.
2.4 Planning
The planning step involves determining the goals, objectives and target audience
of the site. In a business, the objectives might be to promote products and allow
customers to find and purchase the products they are need. The target audience
is related to segmenting, targeting and positioning within the marketing function.
2.4.1 Website Persona

The purpose of personas is to create reliable and realistic representations of your
key audience segments for reference. These representations should be based on
qualitative and some quantitative user research and web analytics. Remember,
your personas are only as good as the research behind them.
Page 7
You may develop one or more personas for a project but limit yourself to the
main audiences for the site. For any given project, creating only three or four
personas is best. Remember that it is better to paint with a broad brush and meet
the needs of the larger populations than try to meet the needs of everyone. The
goal of personas is not represent all audiences or address all needs of the website
but instead to focus on the major needs of the most important user groups.
2.4.1.1
Effective personas:
Represent a major user group for your website

Express and focus on the major needs and expectations of the most
important user groups
Give a clear picture of the user's expectations and how they're likely to use
the site
Aid in uncovering universal features and functionality
Describe real people with backgrounds, goals, and values
2.4.1.2
Benefits of Personas
Personas help to focus decisions surrounding site components by adding a layer
of real-world consideration to the conversation. They also offer a quick and
inexpensive way to test and prioritize those features throughout the development
process. In addition they can help:
Stakeholders and leaders evaluate new site feature ideas

Information architects develop informed wireframes, interface behaviors,
and labeling
Designers create the overall look and feel of the website
System engineers/developers decide which approaches to take based on
user behaviors
Copy writers ensure site content is written to the appropriate audiences
2.4.1.3
Questions to Ask During Persona Development
The following questions and areas of discussion will help you construct a snapshot of the
visitors to your site.
1. Description of the user
Personal
What is the age of your person?
What is the gender of your person?
What is the highest level of education this person has received?
Professional
How much work experience does your person have?
What is your persons professional background?
Why will they come to the site? (User needs, interests, and goals)
Page 8
Where (or from whom) else is this person getting information

about your issue or similar programs or services?
When and where will users access the site? (User environment
and context)
Technical
What technological devices does your person use on a regular

basis?
What software and/or applications does your person use on a

regular basis?
Through what technological device does your user primarily

access the web for information?
How much time does your person spend browsing the web every
day?
2. User Motivation
What is your person motivated by?
What are they looking for?
What is your person looking to do?
What are his needs?
2.4.1.4
Elements of a Persona
Personas generally include the following key pieces of information:
Persona Group (i.e. web manager)
Fictional name
Job titles and major responsibilities
Demographics such as age, education, ethnicity, and family status
The goals and tasks they are trying to complete using the site
Their physical, social, and technological environment
A quote that sums up what matters most to the persona as it relates to your site
Casual pictures representing that user group
2.4.2 Exercise: Goals and objectives

Using Microsoft Word or Microsoft PowerPoint, list down the goals of the website,
and one persona profile and objectives of the profile group visiting the website.
Page 9
2.5 Information Architecture

A very important yet often forgotten step in web development is designing the
Information Architecture (IA) for the website. Just as a building needs an
architectural design to ensure it remains standing, a website needs an IA plan.
IA is closely related to the concept of Information Management (IM) as it involves
planning the information in a logical and organized way (Chaffey 2009 pp. 634639). Through careful planning you can ensure that your website is easy to
navigate and that visitors will be able to find everything easily. You NEED to
have a consistent navigation system!
For the purpose of this exercise we will work with a sitemap, layout and
a content outline.
2.5.1 Sitemap
Inspect the site map (Figure 1), which indicates the proposed pages of this
Resume site. In practice you would spend some time deciding on the layout of the
site map, which represents the structure of your site. However, for now this has
been decided for you as shown below. We have decided that you are going to
create separate pages for various parts of the Rsum, as the content will be too
much for one page.
Figure 1: A Sitemap determines the navigation/structure for the website
We will use this Sitemap for the structure of our Resume Website. Later you will
be expected to create your own Sitemap for your website projects.
2.5.2 Exercise: Create a content outline

In your previous Microsoft PowerPoint or Microsoft Word, create a document using
the sitemap from above. Each page displayed in the sitemap should be a heading.
Reference each page with the corresponding number. For example, 1.0 Resume
Page 10
Home (on the site map) is listed as 1.0 Resume Home. You should also include
the file names in each of the page. This is your content outline. Outside of class,
you will write or copy/paste your resume text content into this document. You
can also include graphic content in this document if you would like. Have the
content prepared by the next tutorial Session. If you are going to use graphics on
the pages also have them prepared.
2.5.3 Storyboard
Likewise you should spend time drafting out the process a visitor to the site might
follow using a Storyboard. This can be done with rough sketch designs of the
page content and should follow a logical set of steps.
2.6 Design
Every good design comes from a plan. That is, a web designer creates one or
more layouts, an organization chooses the best layout and then the web
programmer builds that layout.
Banner
Main Content
Search
Navigation
Footer
Figure 2: Sample finished layout overlaying website (http://www.megastarmedia.net)
Page 11
2.6.1 Layout
Layouts, also known as Composites or Wireframes (Chaffey 2009 pp. 636), are an
important part of web design, which provide a clear idea of the final product
before programming begins. It is extremely important to get this right in the
design phase, because a change after implementation will be very costly. A
layout will be the basis for the template or master page (read below) for the site
and adds consistency, improving usability and the user experience. Currently
most website layouts include:
Header This could be a graphic banner containing the Logo
Navigation areas One or more areas allowing users to find exactly what they
want in the site. This includes search facilities.
Content the part of the page that changes.
Pictures, advertisements or other multimedia
Footer Including Copyright Information and site links.
2.6.1.1
Fireworks Exercise: Creating a layout (wireframe)
First we will build this simple layout in Fireworks and then we will use this layout
for ALL pages in our resume website. Note: it might be helpful to complete
the Fireworks tutorial before starting this. You will use the following
functions of Fireworks:
Marquee Tool
Shape Tool
Stroke
Text Tool
Linking objects
Pointer Tool
Properties
Selecting Colors via Color Picker
Page 12
Figure 3: A sample layout (wireframe) for the website.
Create a new file with these dimensions: 800 pixels width and 600 pixels
height.
Create The Top Banner Border
Create a rectangle using the Rectangle Tool from the Vector palette
In the Properties section, enter the width as 794 and the height as 124
Position the rectangle along the top of your canvas.
Click on the Stroke Colour box and choose the colour you want for the
border of the rectangle. Make the border 3 pixels wide.
Writing Resume Banner
Select the Text Tool from the vector palette
In the Properties section select Arial Black as the Font and an appropriate
Font Size.
Click inside the rectangle and type Resume Banner.
Page 13
Using the Pointer Tool position the text at the top left corner.
Linking the two objects
Look at the Layers Palette and make sure that the My Resume Banner
Text layer is active
While holding down the shift key click on the rectangle in the layers
palette. Now both items are selected.
Click on Modify>Group
The items become one. Call the group Banner Group in the properties
section.
Redo the Steps to create the Navigation Element, the Content Element and
any others you wish to add.
Optimise the graphic as a .gif file.
Save the optimised gif into your website file structure. Create an html link
to the gif from a page called Laboratory Tasks. Call the link Resume
Layout.
2.6.1.2
Fireworks Exercise: Creating a banner
Figure 4: Top banner created in Fireworks
Your banner should be 794 X 124 pixels
Use a picture of yourself and remove the background using the Marquee
tool.
Create a line along the bottom of your banner using the Rectangle tool from
the Vector Box
Put your name, email address and perhaps your mobile number on the
banner, and add a drop shadow.
Page 14
Optimize the image and save as a jpg file.
2.7 Conclusion
You now have a plan from which you can build your resume. This will be done in
the next lab.
2.8 Hints
1. Make sure all of the resources created are linked to your HTML page. If
not, you will not get any marks for this lab.
2. Remember, you are designing your Resume website. Be unique and use
colours that you think go well together. Check the web for existing colours
combinations.
2.9 References
2.9.1 Planning and Design
http://meiert.com/en/blog/20070510/10-steps-to-create-a-high-quality-website/
http://www.adobe.com/support/dreamweaver/layout/site_planning/
http://www.usability.gov/how-to-and-tools/methods/personas.html
2.9.2 Storyboard
http://www.conquerorwebdesign.com/web-site-storyboard.html
2.9.3 Layout
http://www.entheosweb.com/photoshop/layout.asp
http://www.hit-counter-download.com/website-layout-design.html
http://www.layoutcookbook.com/
http://vineyardesigns.com/resources/build_website/layoutdesign.shtml
Page 15
Lab: Building your Resume
Describe the web site development process
Construct a simple web site using VWD from a pre-created design
3.2 Overview
We will now build the physical resume site using our plan as a reference.
3.3 Creating a Master Page

A master page is the template for an ASP.NET website. It maintains consistency
across all the pages to which it is linked. You will build a master page based on
the layout you have already designed.
Create a new website called Resume
Click on the Add New Item button and add a new Master Page, and leave
the default name of MasterPage.master.
Figure 5: Create a Master Page
3.3.1 Inserting a Table

A table is inserted to give layout to the master page.
Page 16
Figure 6: Inserting a new table
Click on Design to go to Design View.
From the Table menu choose Insert Table. Set Rows to 3 and columns to
2.
Then choose 2 consecutive cells in the first row and right click, Modify >
Merge Cells to create a one-cell header.
Page 17
Figure7: Merge Cells
Do the same thing to create footer (merge two consecutive cells in the last
row)
Resize row heights for the header and footer

o Top row should be 124px for banner
o Bottom row should be 60px for footer navigation
Right click on the header row in the table and click on Insert > Row
Above to split the header row into two: one for banner and the other for
horizontal navigation
Drag the ContentPlaceHolder into the content area, which is the second
row and second column of the table (see Figure 0). Note that your
ContentPlaceHolder might be in different location than the one in Figure .
Page 18
Figure 8: Dragging content placeholder into the table
3.3.2 Creating the banner
Create a folder called images in solution explorer (Right click on the root in
solution explorer)
Copy your banner into the folder
Drag your banner into the top row by dragging it from the solution explorer
Page 19
3.3.3 Adding a Site Map and Navigation

Click the Add New Item button and add a Site Map.
Leave the name as Web.sitemap
Replace the existing code in Web.sitemap with the code in Figure
<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="default.aspx" title="Home" description="">
<siteMapNode url="education.aspx" title="Education" description="">
<siteMapNode url="pretertiary.aspx" title="Pre-tertiary" description="" />
<siteMapNode url="tertiary.aspx" title="Tertiary" description="" />
</siteMapNode>
<siteMapNode url="workhistory.aspx" title="Work History" description="" />
<siteMapNode url="interests.aspx" title="Interests" description="" >
<siteMapNode url="workrelated.aspx" title="Work Related" description="" />
<siteMapNode url="leisure.aspx" title="Leisure" description="" />
</siteMapNode>
<siteMapNode url="skills.aspx" title="Skills" description="" />
<siteMapNode url="referees.aspx" title="Referees" description="" />
</siteMapNode>
</siteMap>
Figure 9: Resume Sitemap Code
Before the Site map can be used, all the pages referred to in the Site Map must
be created
In the Add New Item box create a web form and call it education.aspx.
Check the select master page box and click Add. In the Dialogue box
choose the relevant master page (in this case we only have one master
page so the choice is easy).
Follow steps above for all required pages like pretertiary.aspx and so on.
To view the sitemap
Drag a SiteMapDataSource from toolbox (under Data) to the Design

view.
From toolbox (under Navigation) drag a Treeview and place it in the left
column and link it to the SiteMapDataSource (Choose Data Source).
With the Treeview selected go to the Properties panel and under

Appearance change the ImageSet to Arrows.
Page 20
Experiment with some other formatting elements in the Properties panel,

for example change the font or the hover background.
Drag a SiteMapPath from the Navigation toolbox to the top cell of the
table.
3.3.4 HTML Navigation

The horizontal navigation, which should be created in the second row, can be
created using HTML.
<a
<a
<a
<a
<a
<a
href="Default.aspx">Home</a>
href="Education.aspx">Education</a>
href="workhistory.aspx">Work History</a>
href="interests.aspx">Interests</a>
href="skills.aspx">Skills</a>
href="referees.aspx">Referees</a>
Go to design view of the master page and find the second set of <tr> tags.
Insert this block of code between the <tr> and </tr> tags.
In the footer row you can insert a mailto link.
Use this code except change the email address to your email account: <a
href= mailto:sxxxxxxx@rmit.edu.vn?subject=From My
Homepage>Email Me</a>
Find the last set of <tr> tags and insert this block of code between the
<tr> and </tr> tags.
We should now have a Master Page that looks something like (Figure ) in VWD.
Note we can not view it just yet.
Page 21
Figure 10: Master Page in VWD
3.4 Creating the Pages

Delete the Default.aspx page in the Solution Explorer. This will be created again
in the next step.
All the pages in the sitemap (see URLs in Figure 9) must be created by
adding each page and making sure that the Select Master Page checkbox is
checked in each instance (see Figure ).
Page 22
Figure 11: Add new item, select master page
The Masterpage.master should be the only master page that can be

selected in the next dialog box.
Page 23
Figure 12: Source View
3.5 Testing Quality Assurance

You should test all your pages on your local computer, ensuring all links work and
all content and pictures look correct.
3.6 Deployment
The Resume website should be copied to the correct folder on the web server
from where it will be visible to yourself and your friends. Once again, you should
test all your pages on the web server. Do not assume that it works.
3.7 Hints
1. All the pages need to be created and have information on them. This is where
you use the content you have created in the previous lab.
Page 24
3.8 FAQ
Question
Answer
My default page is blank
It is probably not linked to the master page. Delete

it and add it again, but be sure that you click the
checkbox to link to master page.
Why do I have to delete Default.aspx exists before Master Page. Thus

the default page?
Default page is not link to Master Page. To link it to
the master page, it is easier to delete it and
recreate it.
I cant see my images
Make sure they are not stored in the App_Data

folder. This folder is for databases only. Store
images in a new folder called image.
Page 25
Lab: HTML and CSS
Complete a simple web site using VWD from a pre-created design
Able to create and edit HTML codes in particular to updating keywords and
titles, headings,
hyperlinks, tables, bold, underline and italic fonts,
inserting images, unordered and ordered list, horizontal lines and sentence
breaks.
Able to modify CSS properties in particular to changing the background and

other properties for the website.
4.2 Overview
We will now complete the physical resume site using our plan as a reference.
4.3 Constructing the page using HTML

When each page is created, add the content from your plan. Using the source
view, make sure each page:
Have an updated title and keywords (see head section)
Use h1, h2 and h3 tags using <h1></h1>
Have hyperlinks to other pages in your website using <a href= #></a>
Use bold, underline and italic
Have at least one horizontal line in the website using <hr />
Use paragraph tags to arrange your text using <p></p>
Show at least one image using <img src= picture-file width= #

height= # />
Use both unordered and ordered lists using <ul><li>list item</li></ul>
Use cascading style sheets (css) to change the background colour and other
page characteristics. You will need to create the styles.css file and upload it
to the server.
Use the html in Figure 3 to start.


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
Page 26

<head>

<meta name="keywords" content="ISYS2110, name, etc, " />

<title>My title</title>

<link rel="stylesheet" type="text/css" href="/styles.css" />
</head>

<body>
<p>Page content goes here.</p>
</body>
</html>
Figure 11: HTML to copy into your page
4.3.1 CSS
Cascading style sheets (CSS) allow you to set styles for all of the pages in your
website in one file. This makes the site much easier to maintain. For example, if
you wanted to change all the headings to be red, you would need to edit every
page if you did not use CSS. However, with CSS you could make the change with
one single line. Your HTML site should link to the stylesheet below. Feel free to
make any changes.
html
{
background: #fff;
/* background colour white */
color: #000;
/* font colour black */
font-family: Geneva, Verdana, Geneva, sans-serif;
font-size: 12px;
}
body
{
background: #fff url(../image/bg1.gif);
/* background image for the body */
}
a
{
color: red;
/* font colour for links red */
}
a:hover
{
text-decoration: none;
background: blue;
/* background colour when you hover over a link blue */
}
Page 27
h1, h2, h3, h4, h5

{
font-family: Times New Roman;
}
Figure 12: CSS to save as style.css
4.4 Hints
1. Always make sure you remember to end a tag. To help you, create the end
tag when you create the start tag.
4.5 Quiz
1. Briefly explain the purpose of each of the following tags:
a. <html>, <body>, <head>, <title>, <b>, <ul>, <a>
2. What does a web server do?
3. What is the difference between ftp and http?
4.6 Exercise: Macromedia Fireworks
See Blackboard for the resources required for a more advanced Fireworks
lab.
Page 28
Lab: Use-Case Analysis
Understand the role of use cases in system design
Identify actors and transactions of the website
Design a website that is effective and user-friendly
5.2 Role of use cases in system design

Use cases are a very useful starting point in every aspect of object-oriented
system development. They describe the requirements of a system strictly from an
outsiders point of view, specifying the functions which the system delivers to its
customers.
The following are the key benefits of use cases.
Use cases bring to the attention of the developers the gaps which might
exist in the requirements of the user. This early identification of gaps helps
reduce the cost and time which will be needed to change the system in the
future.
Use cases can help to manage a projects workload, as they can be
assigned to members of the development team to be implemented. In
addition, since a use case represents a measurable feature of a system, its
progress to be tracked.
Use cases provide an excellent starting point for building your test cases
and procedures because they accurately capture the requirements of the
user and the metrics for measuring success.
5.3 Key aspects of a use case diagram

5.3.1 Actors
Actors are the external things which interact with our system. In use case, a
stick man notation is used to represent an actor as shown in Figure 15.
Page 29
Figure 15 An example of an actor
Actors which interact with the system externally dont have to be actual people.
An actor can also refer to a system which belongs to another party, such as a B2B
(Business-to-Business) application.
5.3.1.1 Refining actors
One of the interesting things when defining actors is the discovery that some
actors are related to each other. We will look at this using the following example.
The Administrator actor is really a special kind of system user. To order to
indicate that an administrator has the right to do everything a regular user can do
(with additional rights, of course), a generalisation arrow is used as shown in
Figure 2.
The more general "User" actor
User
The Generalization Arrow
Specialised "Administrator" actor
Administrator
Figure 16 Use of generalisation arrow to indicate the special nature of Administrator actor
5.3.2 Use Cases

Once the actors have been identified, the next step is find cases where the
system is being used to complete a specific job for an actor-use case. Use cases
Page 30
can be identified from your users requirements. In this stage, the ambiguous
descriptions in the requirements document should be transformed into a
collection of clear jobs for the system.
A use case might be as simple as allowing the user to register into the system or
as sophisticated as describing a multitasking environment. A use case is basically
a complete use of the system, which means that there is some interaction
between the user and the system as well as some output resulting from the
interaction.
Figure 17 A use case diagram
One critical point of note is this: A use case is something that provides some
measurable result to the user or an external system.
5.3.3 Communication Lines
A communication line connects an actor and a use case to indicate the actor
participating in the use case. There is no limit on the number of communication
lines that can be drawn in a use case.
Figure 18 Communication line between an actor and a use case
The purpose of a communication line is to show that an actor is involved in a use

case, not to imply an exchange of information in any direction or that the actor
starts the use case.
5.4 Relationships in Use Case

There are two types of relationships which are used in use case diagrams in order
to describe the associations which exist between use cases. They are:
The <<use>> relationship
Page 31
The <<extend>> relationship
5.4.1 The <<use>> /<<include>> relationship

The <<use>> relationship declares that the use case at the end of the
dotted arrow completely reuses all of the steps from the use case being
included.
The benefits of using the <<use>> relationship are twofold:
It removes the need for repetitive cut-and-paste operations between use

case descriptions
It gives you a good indication at system design time that the development
of the use case will need to be a reusable part of your system
Figure 19 Use of <<include>> relationship
5.4.2 The <<extend>> relationship

The <<extend>> relationship provides a means for us to show that a use
case might completely reuse another use cases behaviour, similar to the
<<use>> relationship, but that this reuse was optional and dependent
either on a runtime or system implementation decision.
Page 32
Figure 20 Completed use case diagram
Page 33
5.5 Exercise
1. Draw Use case Diagram for following:
Go to following websites and pick a function to draw use case diagram.
www.amazon.com
www.lazada.vn
You should choose at least 4 function to draw the diagram. You should use the
<<use>> /<<include>> relationship and the <<extend>> relationship in those
function where it is possible.
Refer to scenario for the Register use-case.pptx file from Blackboard and write
down the scenario for two of the Use Case you have picked from above exercise.
Make sure you ask feedback from your tutor on your work.
5.6 Use-Case Scenario

Use-case scenario tells the steps in which users need to follow to complete a task.
An example of a use-case scenario looks like this.
5.6.1 A use-case scenario for registering on the website.
Pre-condition: A user is active on the web site
Scenario: Register
Basic path:
1. Use-case starts when customer presses register
2. Customer enters name, postal address and email
3. The post/zip code will be checked for validity
4. The customer will select submit
5. The system will check all fields are present
6. A redirect page will be displayed to thank the customer.
Page 34

Internet For Business

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Internet For Business

Caricato da

Copyright:

Formati disponibili

ISYS 2110

You should save your work either to the H Drive or to a USB. To be

Learning Objectives .......................................................................... 4

IMPORTANT NOTE ............................................................................ 4

Lab Attendance ................................................................................ 4

Overall View of the Website Development Process .......................... 5

Tools Used in Laboratory Sessions ................................................ 5

Additional Resource Websites ....................................................... 5

Rules of Thumb ALWAYS follow these rules: ..................................... 6

Lab: Designing your Resume ................................................. 7

Learning Objectives .......................................................................... 7

Web development process................................................................. 7

Exercise: Goals and objectives ..................................................... 9

Information Architecture ................................................................. 10

Exercise: Create a content outline .............................................. 10

Planning and Design ................................................................. 15

Lab: Building your Resume ................................................. 16

Learning Objectives ........................................................................ 16

Creating a Master Page ................................................................... 16

Inserting a Table ...................................................................... 16

Creating the banner .................................................................. 19

Adding a Site Map and Navigation .............................................. 20

HTML Navigation ...................................................................... 21

Creating the Pages ......................................................................... 22

Testing Quality Assurance ............................................................ 24

Lab: HTML and CSS ........................................................... 26

Learning Objectives ........................................................................ 26

Constructing the page using HTML ................................................... 26

Exercise: Macromedia Fireworks ...................................................... 28

5.1 Learning Objectives .......................................................................... 29

1.1 Learning Objectives

Understand the purpose of this document

Overview the tools to be used in the labs

Create a simple HTML site

Learn some fundamentals about Macromedia Fireworks

HTML 4.01 and XHTML 1.0 coding and techniques

Basic Graphic Design and Editing skills using Macromedia Fireworks.

Overall Website Development Process from a developers and businesss

Visual Web Developer (VWD) to develop a simple ASP.NET websites

1.3 IMPORTANT NOTE

1.4 Lab Attendance

1.4.1 Overall View of the Website Development Process

1.4.2 Tools Used in Laboratory Sessions

1.4.3 Additional Resource Websites

HTML Writers Guild:

HTML with Style:

1.5 Rules of Thumb ALWAYS follow these rules:

When coding html tags, elements or attributes ALWAYS write in lowercase

ALWAYS quote all attributes in an (x)html tag. For example, <body

Always store your database in the App_Data folder.

Make a backup of your files to avoid losing them

Lab: Designing your Resume

2.1 Learning Objectives

Describe the web site development lifecycle

Implement the planning, information architecture and design steps youre

Design a layout and logo using Fireworks

2.3 Web development process

2.4.1 Website Persona

Represent a major user group for your website

Stakeholders and leaders evaluate new site feature ideas

Questions to Ask During Persona Development

What is the age of your person?

What is the gender of your person?