Transcript CIW L8

Site Development
Foundations
Lesson 8
© 2004 ProsoftTraining
All rights reserved
ITD 110 Web Page Design I
Instructors: Carlotta Eaton & John Sledd
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Lesson 8:
Image Techniques
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Objectives
• Create client-side image maps
• Define rectangle, circle and polygon areas as
hot spots in an image
• Link defined areas to URLs
• Define image transparency
• Distinguish between GIF 87a and 89a formats
• Define image interlacing
• Identify animated GIF and PNG image formats
Graphic Types
• Vector
– Graphics that use mathematical
coordinates with lines, curves, shapes to
create desired images and specify colors
• Bitmap
– Graphics that use small dots (usually
thousands) to create an image and specify
color
– Also known as raster graphics
Image Maps
• An image that contains hyperlinked, clickable
regions, sometimes called “hot spots”
• Each hot spot is defined by a set of
coordinates (indicating its position on the
image) and a URL reference
• Two types of image maps:
– Client-side (the most common)
– Server-side (rarely used)
Defining a
Client-Side Image Map
• Define a map, assign it a name, and provide
hot-spot coordinates
• Coordinates can be determined using an imageediting application such as Paint Shop Pro
• Refer to the image map by map name:
<map name="mapname" id=”mapname”>
<area shape="shape" coords="coordinates" href="url"/>
<area shape="shape" coords="coordinates" href="url"/>
<area shape="shape" coords="coordinates" href="url"/>
</map>
• Associate the image file with the map:
<img src="imagemap.gif" usemap="#mapname“/>
XHTML and the id Attribute
• In XHTML, the id attribute is required in the
<map> tag
• Serves same purpose as the name attribute
• If the id attribute is omitted, code will not
validate
Defining Hot Spots
• Three shapes for hot spots:
– Rectangle
– Circle
– Polygon
Rectangle Hot Spot
• Any two points can define a rectangle
• Each point is represented by a horizontal (x)
coordinate and a vertical (y) coordinate
• Rectangles are defined by four coordinates
representing the upper-left and bottom-right
corners of the rectangle
– Code:
<area shape=”rect” coords=”1,52,33,96” href=”hand.htm”/>
Circle Hot Spot
• Circles are defined by two coordinates and a
radius
– Code:
<area shape="circle" coords="x1,y1,radius" href="url“/>
• The pair of coordinates specifies
the circle's center
• A third number specifies
the desired radius,
or half-width, of
the circle
Polygon
• Defines an irregular area (neither a circle nor a
rectangle)
• Specify coordinates for each point that defines the
polygon, from three to 100 pairs of coordinates
– Code:
<area shape="polygon" coords="x1,y1,x2,y2,...xn,yn“ href="url" />
Image Transparency
• Provides the visual effect of blending in to the
background of the Web page
• Most developers use image transparency to
remove the blank image background so it
appears to float on the page
• Web-ready formats that support transparency:
– GIF 89a
– PNG
Image with No Transparency
Transparent PNG Image
Image Interlacing
• Allows an image to progressively display in a
browser while downloading
• The image appears in stages during download
(from top to bottom)
• The top of a non-interlaced image will appear after
the browser has read 50 percent of the image
Image Interlacing
(cont’d)
Animation
• Several images in a sequence, rendered in rapid
succession to simulate motion
• Made possible in several ways:
– Animated GIFs and PNGs
• The animated image is actually a group of
separate, sequenced images
– Flash
• Scripts, called macros, that manipulate
vector images
• Popular, but proprietary technology
(Macromedia)
• Requires a browser plug-in to view
Animation
(cont’d)
• Java
– The user agent must have Java plug-in installed
– May not appear as quickly as Flash
• Scalable Vector Graphics (SVG)
– Developed by various vendors, including
Adobe, Macromedia, Microsoft and Sun
– An open standard adopted by the W3C
– Supports:
• Animation
• Compression
• Searchable text
• Zooming
– Requires a plug-in to view
Animation
(cont’d)
• Identifying animation techniques
– Right-click on the animation in the browser and
identify its properties
– View the Web page source code
• Issues with animation
– Frequently overused
– Can limit accessibility
– Often proprietary, requiring a browser plug-in
• Using non-standard images
Lesson 8 Summary
• Lesson 8 Image Techniques
• See Skills Review page 8-17
• Hands On Time
Lesson 9:
Frames
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Objectives
• Define frames and the purpose of the frameset
document
• Use the <frameset> and <frame> tags
• Identify the purpose of the <noframes> tag
• Target links from one frame to another
• Specify default targets using the <base> tag
• Create borderless frames, and control margins
and scrolling in frames
• Identify the purpose of inline frames
The <frameset> Tag
• A container tag, requires a closing </frameset>
tag
• Determines the frame types and sizes on the
page
• Two frame types:
– Columns
– Rows
Columns Example
• This frameset was created by the following
code: <frameset cols="35%,65%">
</frameset>
Rows Example
• This frameset was created by the following
code: <frameset rows="160,*"> </frameset>
The <frame> Tag
• Defines the content in each frame
• Placed between the <frameset> </frameset> tags
• The src attribute specifies the file that will appear
in the frame
• In the following example, the page that will appear
in the top frame is the file fl-toc.html, and the page
that will appear in the lower frame is flsecond.html.
<frameset rows="160,*">
<frame src="fl-toc.html" \>
<frame src="fl-second.html" \>
</frameset>
The Frameset Document
• Contains the the <frameset>, <frame> and
<noframes> elements
• The <frameset> and <frame> tags will create frames
only if they are placed correctly into this document
– In the frameset document, the <frameset>
element takes the place of the <body> element
– The opening <frameset> tag follows the closing
</head> tag
– The <frameset> tag must contain either the rows
attribute or the cols attribute, or both
Viewing Source with Framesets
• Click on the frame you want to view
• Take the necessary steps to view source
• The same instructions apply to printing from a
frame
The <noframes> Tag
• For user agents that cannot render frames
• Displays alternative text or images
– In some ways, similar to the alt attribute for
the <img> tag
• Code:
<noframes>
<body> If you had a frames-capable browser, you
would see frames here.
</body>
</noframes>
Targeting Frames with Hyperlinks
• Use the name attribute to name a frame, then target
the frame name with hyperlinks
• The syntax for naming a frame is as follows:
<frame src="url" name="framename”/>
• The following code names a frame:
<frame src="james.html" name=“authors”/>
• The following code targets this frame:
<a href="james.html" target=“authors"> Visit James </a>
• If a user clicks the Visit James link, the James page
will open in the Authors frame
Base Target
• A base target automatically sets a default
target frame for all links in a page
• Created using the <base> tag
• Code:
<base target="main" href=“page.html"/>
• This code will cause all linked pages to open
in the frame named Main
• The href attribute is optional
Borders, Margins and Scrolling
• To create borderless frames, add the
frameborder attribute to the <frame> tag
– frameborder=“1” causes borders to display
(the default)
– frameborder=“0” hides borders
• Example:
<frame src="home.html" name=“main“ frameborder="0"/>
Borders, Margins
and Scrolling (cont’d)
• Frame margin width and height
– The marginheight attribute designates the space,
in pixels, between the top and bottom margins
– The marginwidth attribute designates the space,
in pixels, between the left and right margins
Borders, Margins
and Scrolling (cont’d)
• Scrolling frames
– The scrolling attribute to the <frame> tag controls
whether the scrollbar appears
– The scrolling attribute values:
• “yes” — enables scrolling (the default)
• “no” — disables scrolling
• “auto” — allows the browser to decide
• Example:
<frame src=“ex.html" name=“ex" frameborder="0" scrolling="no"/>
Inline Frames
• Inserts an HTML or XHTML document inside
another
• Also called “floating frames”
• Created with the <iframe> tag
• The browser reads the <iframe> tag from the
file, then makes a separate request to the
server for the embedded file
Inline Frames (cont’d)
• Simple XHTML page with inline frame:
<h1>iFrame Example</h1>
<p><strong>This text is in iframe.html</strong><p/>
<iframe src="embedded.html" scrolling=”yes">
Your browser does not support frames.
</iframe>
<p><strong>This text is also in iframe.html. </strong></p>
• The next slide shows the results of this code…
Inline Frames (cont’d)
Inline Frames (cont’d)
• Inline frames are useful for:
– Web documents in which all content will
remain stable, except for one section (e.g.,
a weekly special) -- the frequently changed
section can be an inline frame, which can
be quickly modified when necessary
without editing the entire page
– Documents that you prefer to embed in a
page instead of placing on a separate page
or providing as a download (such as text or
a PDF)
Appropriate Use of Frames
• Frames are useful only in specific situations
• Consider the following issues:
– Function
– Appeal
– Development challenges
– Accessibility limitations
– Usability with the browser Back button
Lesson 9 Summary
• Lesson 9 Frames
• See Skills Review page 9-17
• Lab Time
Lesson 10:
GUI HTML Editors
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Objectives
• Identify types of GUI editors that automatically
create HTML and XHTML code
• Identify specific features of GUI editors
• Create a Web page using a GUI editor
• Identify requirements for publishing a Web site
publishing to a Web server
Introduction to GUI HTML Editors
• Graphical user interface (GUI) HTML editor
• Automatically generates HTML (or XHTML)
code
• Developer inputs content as in a standard
word processor
• Also known as WYSIWYG (What You See Is
What You Get) editors
Types of GUI Editors
• Page editors
– Simpler
– For smaller sites or non-collaborative work
• Netscape/Mozilla Composer
• Microsoft FrontPage Express
• Site management editors
– Tools to manage pages and sites
– Integrates with related applications
– Designers and developers can collaborate to design, build
and manage Web site and Internet applications
• Macromedia Dreamweaver
• Adobe GoLive
• Microsoft FrontPage
GUI HTML Editor Functionality
• Features of GUI editors:
– Templates and wizards
– Text style options
– Icon bars
– Images
– Hypertext links
– HTML importing
– Spelling check
– Table creation
– Publishing
W3C Authoring Tool
Accessibility Guidelines
• The guidelines mandate:
– The ability of the GUI editor to generate
proper code
– The usability of the GUI editor by a disabled
person creating a Web page
• Seven specific points
Creating Web Pages
with a GUI Editor
• Coursebook labs use the toolbar, menus and
functions of a GUI Web page editor
• Netscape Composer
HTML Text Editors
vs. GUI Editors
• HTML text editors (e.g., Notepad, Vi, Pico)
– Easily include other code (e.g., JavaScript)
– Readily modify code
– Apply your HTML/XHTML knowledge and skills
• Drawbacks:
– Typing code is time-consuming
– People with disabilities may find manual entry
difficult or impossible
– Require a higher degree of effort to create even a
simple page
GUI HTML Editors
• GUI HTML editors
– Quick code creation
– Facilitate collaboration
– Spelling checker
– Automatic publishing
• Drawbacks:
– Rarely keep pace with the evolution of
HTML/XHTML standards
– Code you enter manually may be ignored
Previewing Pages
and Validating Code
• Most GUI editors make it easy to:
– Preview pages in a browser
– View source code
– Validate code
• Validating HTML code
– Specify the correct <!DOCTYPE> before
validating; the GUI HTML editor may not do this
– Many tools provide useful validation tools
– Some editors provide tools for disabled users
Web Site Publishing
• GUI HTML editors usually provide a publishing
feature
• FTP is the standard protocol for Web page
publishing
– Stand-alone FTP clients
– FTP client provided by GUI HTML editor
Publishing to a Test Web Server
• Before publishing pages to a public site, post them
to a test server
– Often called a staging server
– Verify that pages work and render as expected
– Verify that CGI script works as expected
– Locate and repair dead links
– Allow stakeholders to preview the site
• Test server configuration
– Test server must be identical to production server
– Use the same Web server software and CGI
solution
Web Site Publishing (cont’d)
• Example settings for publishing with Netscape
Composer
Lesson 10 Summary
• Lesson 10 GUI HTML Editors
• See Skills Review page 10-23
• Lab Time
Lesson 11:
Advanced Web Technologies
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Objectives
• Identify client-side and server-side scripting
technologies
• Connect Web pages to databases
• Use CSS to apply formatting to Web pages
• Identify the benefits of Dynamic HTML (DHTML)
• Define the function of the Document Object Model
(DOM) and its relationship to browsers
• Compare the use of a service provider to hosting
your own Web site
Extending HTML
• Client-side and server-side scripting
• Connecting to databases
• Additional ways to apply Cascading Style
Sheets (CSS)
• Dynamic HTML (DHTML)
• Document Object Model (DOM)
Server-Side and Client-Side
Languages
• Programming concepts
– Not required knowledge, but essential
terminology is useful to understand
• Programming statements
– if/then
– if/then/else
– do while
– do until
– break
Server-Side Languages
• Attributes of server-side language:
– Code is executed by the Web server, not the Web
browser
– Code executes because an interpreter has been
installed and activated on the Web server
• Server-side scripts are used for various purposes:
– Browser detection
– Database connectivity
– Cookie creation and identification
– Logon scripts
– Hit counters
– File uploading and downloading
PHP Hypertext Preprocessor (PHP)
• An interpreted server-side scripting language for creating
dynamic Web pages
• Embedded in HTML pages but usually executed on a Web
server
• Example of PHP code:
<?php
$envVars = array("HTTP_USER_AGENT");
foreach($envVars as $var)
{
print "
<html><head><title>PHP CGI Example</title></head><body>
<h1>Hello, World!</h1>
Your user agent is:<strong>${$var}.</strong>
<br/>
</body></html>
";
}
?>
Practical Extraction and
Report Language (Perl)
• Another server-interpreted language
• Older, but very popular
• Example of Perl code:
#!/usr/bin/perl
use CGI qw/:all/;
$cgi_object = CGI::new();
print "Content-type: text/html\n\n";
print "<html>\n<head>\n<title>\nPerl CGI
Example\n</title>\n<body>\n<h1>Hello,
World!</h1>\nYour user agent is: <b>\n";
print $cgi_object->user_agent();
print "</b>.</html>\n";
Active Server Pages (ASP)
using VBScript
• Microsoft’s original server-side scripting solution
• Example of ASP code using VBScript:
<%@ LANGUAGE=vbscript %>
<html>
<head>
<title>ASP CGI Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<%
path = Request.ServerVariables("PATH_INFO")
pagename = Request.ServerVariables("HTTP_HOST")
method = Request.ServerVariables("REQUEST_METHOD")
browser = Request.ServerVariables("HTTP_USER_AGENT")
user = Request.ServerVariables("REMOTE_ADDR")
C
• A procedural language (relies upon subprograms to
accomplish a task in an application)
• C is a time-honored language, usually used to create standalone applications and operating systems (e.g., UNIX/Linux)
• Can also be used for CGI
• Example of C code:
#include <stdio.h>
int main()
{
printf("Hello, World!\n");
return 0;
}
• Note this code includes a reference to a library called stdio.h
C++
• Object-oriented language
– A style of programming that links data to the
processes that manipulate it
– May include procedural elements, but instead of
using subprograms to accomplish a task, will
create an object that can then be manipulated
throughout the program
– Once an object is created, it can be reused
• Platform dependent:
– Must be compiled to a specific architecture (e.g,
IBM-compatible, PowerPC)
Java
• Object-oriented
• Compiled
• Platform-independent
– Marketing: Write once, run anywhere
– Reality: Write once, test everywhere
• Java can be used to write:
– Stand-alone applications
– Servlets
– JavaServer Pages (JSP)
Visual Basic
• A compiled programming language developed
by Microsoft Corporation
• Used for stand-alone applications and serverside Web applications
• Once only procedural, now has object-based
elements
C#
•
•
•
•
Object-oriented
Compiled
Platform-dependent
Used for Microsoft .NET program
Server Side Includes (SSIs)
• An instruction inside of an XHTML/HTML page that
directs the Web server to perform an action
• An alternative to CGI
• SSI instructions are in SGML
• Can be used to:
– Place the results of a database query into a page
– Execute other programs
– Indicate the last time a document was modified
– Insert footer text at the bottom of a page
– Add the current date as a timestamp to a page
Server Side Includes (SSIs)
(cont’d)
• Standard SSI file name extensions:
– .shtml
– .shtm
• SSI support in Web servers
– Most Web servers include code that
enables SSI
– However, the SSI feature may be disabled
• You may have to activate the feature
• You may also have to define a MIME type
Client-Side Languages
• Issues with client-side languages
– Some clients do not support JavaScript or
any other such scripting language
– Users can deactivate script execution in
browsers that normally support it
JavaScript
• Object-based
• Adds interactivity to Web pages
• Can also be used on the server side (Server-Side
JavaScript, SSJS)
• On the client side, can be used to:
– Detect browsers
– Create cookies
– Create mouse rollovers
• JavaScript advantages
– Platform-independent
– Vendor-neutral
– Relatively simple
JavaScript (cont’d)
• Can be placed in an HTML/XHTML document
– Use the <script> tag
• Browser detection (using JavaScript or any
other scripting technology) is useful for:
– Presenting different versions of a site to
different browsers
– Informing users in a corporate intranet to
upgrade their browsers to a supported
version
– Ensuring accessibility to disabled users
JavaScript (cont’d)
• JavaScript and cookies
– Cookies are stored on the hard drive
– Cookies can be used to:
• Store passwords
• Store user preferences
• Choose which Web pages will be
displayed based on browser version
VBScript
• Microsoft’s answer to JavaScript
• Can be used on the client side or the server
side
• If used on the client side, only Internet
Explorer can render the script
Connecting to a Database
• For a database to work, you must:
– Provide a way for the Web server and
database to recognize each other
• Microsoft systems can use ODBC
• Other methods include PHP scripts
– Provide permissions to the database so it
can be read and/or written to
• You must also supply SQL scripts
CGI and Permissions
• Aside from improper coding, CGI scripts
usually fail to execute because:
– The Web server does not have the
permissions to execute files and scripts
– The file or script used has incorrect
permissions, which prohibits the server
from executing the file
ISPs and CGI
• If working with an Internet Service Provider
(ISP), you generally need to:
– Request CGI services
– Request that the ISP:
• Enables execute permissions on your
scripts
• Creates a directory that contains
available CGI scripts
• Provides user name and passwords with
enough permissions to work the system
N-Tier Applications
• When discussing databases, three elements are
generally involved:
– Data
• The database file or multiple database files
– Business logic
• The SQL coding necessary to create
relationships with the data stored in the
database
– Presentation
• The way that data and business logic are
presented on the user screen
N-Tier Applications (cont’d)
• In n-tier, all three database elements are separated
Styling Techniques with CSS
• Types of CSS include:
– Linked style sheet
• The <style> and <font> tags in the
HTML/XHTML file will override style
sheets
– Inline style
– Embedded style
– Imported style sheet
Declaring an Inline Style
• The <span> tag
– Can span multiple elements:
<span style="background: red">
CIW Associate </span>
• The style attribute
– Used inside a tag:
<h1 style=“color: magenta; font-family: arial”>
CIW Associate </h1>
Embedded Styles
• An embedded style sheet uses the
<style> tag within the <head> section:
<head>
<title>Certified Internet Webmaster</title>
<style>
h1 {color: magenta; font-family: arial; font-size: 20pt}
</style>
</head>
• The style will remain in force until
overridden (e.g., by an inline style)
Imported Style Sheets
• Like a linked style sheet, refers to a separate
file
• Created using the @import statement with the
following syntax:
@import url(filename.css)
<head>
<title>Certified Internet Webmaster</title>
<style type="text/css">
@import url(import.css);
</style>
Style Sheets and
Browser Compatibility
• Styles can cause problems with older
browsers
– Imported styles can especially cause
problems
– Test your code in multiple browsers
• Most modern browsers are designed to
support style sheets
Dynamic HTML (DHTML)
• An enhancement that provides animation,
interactivity and dynamic updates in pages
• DHTML capabilities include:
– Automatic adjustment of font sizes and
colors
– Absolute positioning
– New document content
– Granular control over animation, audio and
video
• Requires XHTML 1.0 or HTML 4.01, CSS, and a
way to access the Document Object Model
(DOM)
The Document Object
Model (DOM)
• A vendor-neutral, cross-platform application
programming interface (API)
• Specifies how objects in a document can be
referred to and manipulated through scripting
languages
• Describes the elements, or objects, within a
document rendered by a user agent (e.g., Web
browser)
• A W3C standard
The Document Object Model (DOM)
(cont’d)
• Accessing a browser's DOM
– Use a scripting language
• JavaScript
• VBScript
– DOM compliance
• At one time, several DOMs, depending upon
browser manufacturers
• W3C standardization
• Choosing a DOM-compliant browser
• Undefined object error and the DOM
• XHTML, the DOM and browser compatibility
Working with Web Service Providers
• Internet Service Provider (ISP)
– Provides basic services
• Internet connectivity
• Web server
– You need your own experts
• Application Service Provider (ASP)
– Provides more advanced services
• Messaging (i.e., e-mail)
• Databases
• Spam filtering
• Telephony services
Costs of Using an ASP
• Often based on:
– Amount of traffic
– Amount of support you require
• Database connectivity
• Per-service costs
• Bandwidth
• Customer support
• Security
Co-Location, Dedicated Hosting
and Virtual Servers
• Co-location
• Dedicated hosting (co-hosting)
• Virtual server
Comparing Options
• Configuring your own hosting solution
– Benefits
– Drawbacks
• Using an ISP
– Benefits
– Drawbacks
• Using an ASP
– Benefits
– Drawbacks
Communicating Needs and
Negotiating Services
• Be prepared to detail your needs
• Negotiate prices by providing information:
– Potential amount of traffic
– Hard drive space needed
– Database and CGI needs
– Additional services (e.g., custom applications)
• As you work with ISP and ASP sales
representatives,
– Communicate your needs
– Talk to the sales representative manager
– Have your manager talk to the ISP/ASP manager
Information You Need from
Your Service Provider
•
•
•
•
•
Account information
IP addresses and DNS names of the server
Instructions about file and directory locations
The service provider’s contact information
Additional information:
– ISP/ASP security policies
– ISP/ASP support procedures
– Procedures for reporting problems
– Average timelines for resolving problems
Lesson 11 Summary
• Lesson 11 Advanced Web Technologies
• See Skills Review page 11-37
• Lab Time
Lesson 12:
E-Commerce Practices
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Objectives
•
•
•
•
•
•
Compare e-commerce to traditional commerce
Define e-commerce terms and concepts
Relate the concept of supply chain to e-commerce
Identify payment models used in e-commerce
Identify ways to protect private transactions
Identify issues related to working in a global
environment
• Identify ways to build e-commerce relationships
using Web-based technology
Traditional Commerce
vs. E-Commerce
• Similarities
– Both aim to deliver a valued product or service
– Both want to serve a large audience
– Both strive to quickly deliver products and services
• Differences
– E-commerce customers expect shorter fulfillment time
– E-commerce customers must understand Web-based
technologies
– E-commerce provides a global audience
– E-commerce orders are processed without human
interaction or travel to a store location
– E-commerce relies upon encryption for security
E-Commerce Models
• Business to consumer (B2C)
– Targets consumers or end users, and sells
products and/or services
• Amazon.com, small business sites
• Business to business (B2B)
– Helps organizations to manage relationships
and transactions with other businesses
• B2BExchange
• Consumer to consumer
– Not a traditional B2C model
• eBay
Business and Internet
Technologies
• Traditional businesses also use e-commerce
– Not an either/or proposition
– Web technologies make traditional
business more efficient
• E-commerce concepts:
– Supply chain management
– Enterprise resource planning (ERP)
– B2B information sharing
– Internet marketing
Supply Chain Management
• The ability to manage the process that
generates a product and distributes it to
customers
– You must manage the process that begins
with raw materials and ends with a product
delivered to a consumer
– Customer can be:
• An end user
• Another business that resells your
product after adding value to it, known
as a Value Added Reseller (VAR)
Supply Chain Management (cont’d)
• Traditional supply chain management model
• Professionals running e-commerce sites
increasingly need to understand this model
Supply Chain Management (cont’d)
• Supply chain management involves the
following business aspects:
– Product demand
– Information flow
– Finance management
• Essential supply chain management terms
– Upstream and downstream
– Capacity requirements plan
– Additional terms found in coursebook
Enterprise Resource Planning (ERP)
• Use of software to create an automated plan for
company operations
• ERP goal -- enhance communication among all
company departments and divisions through
software automation
• Accomplished through automation of tasks and
reporting
• All company/organization departments involved
• Common terms:
– Bolt-on system
– Application programming interface (API)
– Library
B2B Information Sharing
with XML
• XML allows information to be indexed once,
then used in many different applications and
companies
• DTD limitations
• XML schema
Internet Marketing
• More than technical knowledge is needed
– Relationship to the business, including the
marketing department
• Marketing terms
E-Commerce Information-Formatting
Technologies
• When businesses need to exchange
information, they must agree upon universal
information-formatting methods
• The two most common ways to format
information are:
– Electronic Data Interchange (EDI)
– Open Buying on the Internet (OBI)
Electronic Data Interchange (EDI)
• A universal method for formatting information so it
can be transferred among organizations
• In place for over 20 years
• Useful for exchanging:
– Invoices
– Bills
– Purchase orders
– Inventory lists
– Supply chain information
• EDI implementation and drawbacks
• EDI and XML
Open Buying on the Internet (OBI)
• Designed as an alternative to EDI
• Developed to target high-volume, low-cost
transactions
– These account for almost 80 percent of
most companies' purchasing activities
• OBI components
• OBI transactions
• OBI and EDI
• OBI and XML
E-Commerce
Payment Technologies
• Payment technologies include:
– Electronic Funds Transfer (EFT)
– Payment gateways
– Secure Electronic Transactions (SET)
– Open Trading Protocol (OTP)
– Secure Sockets Layer (SSL) / Transport
Layer Security (TLS)
Electronic Funds Transfer (EFT)
• A generic term that describes the ability to transfer
funds using computers rather than paper
• Also known as wire transfer
• EFT systems must ensure:
– Confidentiality of payment information
– Integrity of payment information
– Merchant authentication
– Interoperability
• Automated Clearing House (ACH)
– Governed in the United States by the National
Automated Clearing House Association
– Used in EFT
Payment Gateway
• Mediates between a merchant and a merchant
bank
• Once the merchant receives payment from a
customer, the merchant uses the payment gateway
to transmit credit card information to the bank
• Responsibilities:
– Forwarding information
– Authenticating participants
– Ensuring confidentiality
– Ensuring data integrity
• Payment gateway companies
Secure Electronic
Transactions (SET)
• Uses digital certificates to secure financial
transactions
• Public and private keys ensure encryption,
data confidentiality and non-repudiation
• Designed to allow both simple and complex
transactions
• History of SET
• SET example
• SET vs. conventional transactions
Open Trading Protocol (OTP)
• Alternative to SET
– An open standard (RFC 2802)
– Used for both B2C and B2B
– Often used with XML
• OTP features:
– Provides trading protocol options to control the
way that the trade occurs
– Provides a record of a particular trade
– Supports real and virtual delivery of goods and
services (payment tracking)
Secure Sockets Layer (SSL) /
Transport Layer Security (TLS)
• Not transaction methods
• Used to secure transactions
• Services provided:
– Authentication
– Data confidentiality
– Data integrity
SSL/TLS and
Public Key Infrastructure (PKI)
• You need a certificate to enable host
authentication before you can begin an SSL
session
• Public Key Infrastructure (PKI)
– A collection of individuals, networks and
machines that comprise the ability to
authoritatively confirm the identity of a
person, host or organization
PKI Elements
• PKI elements include:
– Digital certificate
– Certificate authority (CA)
– Registration authority (RA)
– Certificate server
– Certification chain
Digital Certificates and X.509
• Digital certificates used in PKI conform to the ITU
X.509 standard
• X.509 describes how to format digital certificates
PKCS Standards
• Public-Key Cryptography Standards (PKCS)
– Used to store and transport certificates
• PKCS #7
– Used to secure e-mail certificates
• PKCS #10
– Used to generate a certificate request to a
certificate authority (CA)
Certificate Life Cycle
• Certificates usually have a limited life (e.g., 1
month, 2 years, 6 years)
• Life cycle helps reduce the likelihood of fraud
• Terms include:
– Certificate policy
– Certificate Practice Statement (CPS)
– Certificate expiration
– Certificate revocation
– Certificate suspension
– Certificate renewal
– Certificate revocation list (CRL)
– Online Certificate Status Protocol (OCSP)
Additional SSL/TLS Concepts
• The SSL/TLS handshake
• Common applications
• Beginning an SSL/TLS session
– Encryption begins after authentication
– Issues:
• Different host name
• Certificate expired
• Certificate date not yet valid
• Invalid certificate format
• Certificate presented by the server not
signed by a recognized CA
• Incompatible encryption settings
Working in a Global Environment
• By placing your business on the Web, you
expand your audience to include anyone in the
world with a browser and Internet access
• Consider the level to which you will
accommodate potential customers from
countries outside yours
– Issues to consider include:
• Currency exchange rates
• International shipping
• Language concerns
• Relationship management
Currency and Trade
• Each country (e.g., China) and economic block
(e.g., European Union) uses its own currency
• Businesses and organizations must be able
to:
– Automatically calculate exchange rates for
the day of the transaction
– Calculate taxes and tariffs on goods
• Taxes, tariffs and trade
International Shipping
• Consider the following issues:
– Customs searches
– Costs incurred by customs
– Delays caused by customs
– All tariffs
• Legal and regulatory issues
Language Concerns
• As you develop an e-commerce site, consider
the following issues:
– The language(s) used by the target
audience
– The characters necessary (e.g.,
alphanumeric, mathematical or currency
symbols)
• Character sets and languages
– Computers can use different character sets
– Unicode
Relationship Management
• Building trust
– Quality customer service
– Frequent contact
• Customer self-service
– Automatic order tracking
– Unattended choice
– Order customization
Lesson 12 Summary
• Lesson 12 E-Commerce Practices
• See Skills Review page 12-29
• Lab Time
Thank you for attending
Site Development
Foundations
© 2004 ProsoftTraining
All rights reserved
Copyright © 2004 ProsoftTraining, All Rights Reserved.