1.

Distinguish between:
INFO 3435- eCommerce a) Packets and IP addresses

3. eCommerce Infrastructure
Tutorial 3
A packet is the grouping of data for transmission on a network. In
technical terms; it is a sequence of bits that carries identifying
information for transmitting the data as well as the data itself. A
single packet contains a header to keep track of the actual data it
carries.
Axure – Part 3
An IP address is a host number that identifies a node or a server
on a network. It is comprised of a 33-bit string that is broken
Danielle Thornhill down into four octets (each octet contains 8 bits).
17-Sep-2015

3-1 3-2

2. Distinguish between:
b) Protocols and TCP/IP
3.Distinguish between:
c) routers and hubs

A router is a piece of network hardware that operates at the Internet layer

A protocol (in the IT arena) is a rule that governs how communication of the OSI model. This piece of hardware allows you to connect the
should be conducted between two parties, two computers, or a source network little chunks, called network segments (or subnets), so that the
and a destination. different LAN segments can talk to each other. Routers are “intelligent”
devices, in that they can evaluate the network traffic and can stop local
They are pieces of software that run on every node or computer and traffic from entering and causing congestion on other local area networks.
allow every pair of computers to communicate without having to know Routers are more expensive and difficult to operate than hubs. They may
much about each other, except for the IP address. be slower than hubs, since they must perform additional processing on the
data packet.
TCP/IP is short for Transmission Control Protocol/Internet Protocol. Hubs operate on the OSI physical layer. They act as a connecting point for
This is the most widely used protocols suite used on the Internet. network devices. They are not “intelligent” devices, when compared to
TCP/IP is not restricted to the Internet; it has quickly become one of routers, and cannot perform processing on packets as they pass through
the most common protocol suites on networks. the device. They are less expensive and easier to maintain than routers.

3-3 3-4
 4. In your own words, explain how computers
communicate on the Internet?
Walk through this process, providing the actions of the various layers of the OSI model.
As the packets travel from one node to another, they move from the uppermost layer of
the OSI model down to the physical layer for transmission to the receiving node. Once
the packets reach their destination, they must move back up the OSI model. The figure
provides both the OSI layers as well as the TCP/IP layers (Application, Transport and
Transmission).

Application program FTP request

AXURE
Application layer
FTP
header
FTP request
Widgets and Masters
Transport layer TCP FTP
FTP request
(each packet) header header

Internet layer IP TCP FTP

(each packet) FTP request
header header header

Network access
layer
Network IP TCP FTP
header header
FTP request
header header
3-5 3-6

Add a Button Shape and set Mouseover Style Duplicate and Distribute Button Shapes

MouseOver style means something that happens when you 
• Hold the CTRL key and drag to duplicate your button 
move a mouse over the widget
• Click and drag over all the buttons 
• Click and drag a button shape from widgets pane to the 
design panel  • Click the Align middle and Distribute Horizontally buttons 
from the toolbar at the top 
• Select MouseOver from the Properties tab
• Select each button individually, double click and change the 
• Check the boxes for bold and fill color. Then, select a fill color label on them to match your page names (Home, page 1 etc)
and click OK

3-7 3-8
Convert the Button Shapes to a Master Place the Master on each page 
Converting the button shapes to a master allows you to create 
a consistent menu across all pages to which the master is  • You will now see the NaviBar appear in your ‘Masters’ 
applied.
window 

• Click and drag to select all 4 buttons  • Double click on Page 1 to open it
• Right click on the selected area and go to Convert to Master 
• Drag and drop the NaviBar from the masters window to the 
• Name the Master “NaviBar” 
• Select “Lock to master Location” – this means that the  design window. 
Master will maintain its position on all pages to which it is 
applied.  • Repeat the previous 2 steps for pages 2 and 3. 
• Click continue 

3-9 3-10

Add Links to the Button Shapes in the Master

• Double click on “NaviBar” to open the master 

• Select the “home” button in the NaviBar

• Under Interactions (on the left of the screen) click create link
Building Interactions
• Select Home page 

• Repeat for all the other buttons to link to their respective pages. 

PREVIEW!! 

3-11 3-12
Add a Button Shape and Two text fields Disable the Second Text field 

• Drag button and 2 text fields from widgets pane  • Click in Text Field 2 

• Edit text on the button to read “Swap focus”  • Edit the hint text to “Text Field 2” 

• In the widget Interactions area you will see ‘shape name’,  • Change the Text Field name to “TextField2” 
type in Button1 • In the properties tab select ‘disabled’ 
• Select the first textfield and edit the hint text in the 
properties tab to read “Text Field 1” 

• Also, change the Text Field name to “TextField1” 
3-13 3-14

Make Clicking the Button Disable TextField1 Add ‘Enable’ to TextField2

• Select the “Swap Focus” button  • Click on Enable (Widgets>Enable/Disable) 

• Double click the On‐click event in the Interactions window • Check the box for TextField2

• The case editor will appear, under Widgets> Enable/Disable ,  • Don’t click ‘OK’ yet! 
select Disable 

• Check the box for TextField1 in the far right column 

• Don’t click ‘Ok’!

3-15 3-16
Set Focus on TextField2 Set focus on TextField1 when the page loads

• Click on Focus in the left column (Widgets > focus)  • Under Page interactions tab (at the bottom of the screen) 

• Click the box in the right column for TextField2 select ‘OnPageLoad’ 

• Double click the actions to make sure they were set up  • Select the action for ‘Focus’ 

correctly • Specify for TextField1

• Click ‘OK’!  • Click OK

3-17 3-18